💄(frontend) add minor layout adjustments

Propose minor layout adjustments to ensure the DINUM version with French
copywriting does not look visually awkward due to line breaks.

src/frontend/src/features/notifications/components/ToastRecordingRequest.tsx

@@ -66,16 +66,22 @@ export function ToastRecordingRequest({
           name: participant?.name,
         })}
         {!options.isMenuOpen && (
-          <Button
+          <div
-            size="sm"
-            variant="text"
             className={css({
-              color: 'primary.300',
+              marginLeft: '0.5rem',
             })}
-            onPress={options.openMenu}
           >
-            {t('openMenu')}
+            <Button
-          </Button>
+              size="sm"
+              variant="text"
+              className={css({
+                color: 'primary.300',
+              })}
+              onPress={options.openMenu}
+            >
+              {t('openMenu')}
+            </Button>
+          </div>
         )}
       </HStack>
     </StyledToastContainer>

src/frontend/src/features/recording/components/ControlsButton.tsx

@@ -161,6 +161,7 @@ export const ControlsButton = ({
         fullWidth
         onPress={handle}
         isDisabled={isDisabled}
+        size="compact"
       >
         {t('button.start')}
       </Button>

src/frontend/src/features/recording/components/RowWrapper.tsx

@@ -29,9 +29,10 @@ export const RowWrapper = ({
       className={css({
         width: '100%',
         background: 'gray.100',
-        padding: '8px',
+        paddingBlock: '0.5rem',
+        paddingInline: '0',
         display: 'flex',
-        marginTop: '4px',
+        marginTop: '0.25rem',
       })}
     >
       <div
@@ -40,6 +41,7 @@ export const RowWrapper = ({
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
+          paddingInline: '0.25rem',
         })}
       >
         {/*  fixme - doesn't handle properly material-symbols  */}
@@ -47,10 +49,11 @@ export const RowWrapper = ({
       </div>
       <div
         className={css({
-          flex: 5,
+          flex: 6,
           display: 'flex',
           alignItems: 'center',
           gap: '0.25rem',
+          paddingInlineEnd: '8px',
         })}
       >
         {children}

src/frontend/src/primitives/buttonRecipe.ts

@@ -31,6 +31,12 @@ export const buttonRecipe = cva({
         borderRadius: 4,
         '--square-padding': '0',
       },
+      compact: {
+        borderRadius: 4,
+        paddingX: '0.5',
+        paddingY: '0.625',
+        '--square-padding': '{spacing.0.625}',
+      },
     },
     square: {
       true: {