💄(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,6 +66,11 @@ export function ToastRecordingRequest({
           name: participant?.name,
         })}
         {!options.isMenuOpen && (
+          <div
+            className={css({
+              marginLeft: '0.5rem',
+            })}
+          >
             <Button
               size="sm"
               variant="text"
@@ -76,6 +81,7 @@ export function ToastRecordingRequest({
             >
               {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: {