chore: Adjust chat input row design

lib/pages/chat/chat_input_row.dart

@@ -364,6 +364,13 @@ class ChatInputRow extends StatelessWidget {
                             onPressed: () =>
                                 ScaffoldMessenger.of(context).showSnackBar(
                                   SnackBar(
+                                    margin: EdgeInsets.only(
+                                      bottom: height + 16,
+                                      left: 16,
+                                      right: 16,
+                                      top: 16,
+                                    ),
+                                    showCloseIcon: true,
                                     content: Text(
                                       L10n.of(
                                         context,

lib/pages/chat/recording_input_row.dart

@@ -22,31 +22,41 @@ class RecordingInputRow extends StatelessWidget {
         '${state.duration.inMinutes.toString().padLeft(2, '0')}:${(state.duration.inSeconds % 60).toString().padLeft(2, '0')}';
     return SizedBox(
       height: ChatInputRow.height,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 8.0),
       child: Row(
         crossAxisAlignment: .center,
         mainAxisAlignment: .spaceBetween,
-          spacing: 8,
         children: [
-            IconButton(
+          const SizedBox(width: 4),
+          Container(
+            alignment: .center,
+            width: 48,
+            child: IconButton(
               tooltip: L10n.of(context).cancel,
               icon: const Icon(Icons.delete_outlined),
               color: theme.colorScheme.error,
               onPressed: state.cancel,
             ),
+          ),
           if (state.isPaused)
-              IconButton(
+            Container(
+              alignment: .center,
+              width: 48,
+              child: IconButton(
                 tooltip: L10n.of(context).resume,
                 icon: const Icon(Icons.play_circle_outline_outlined),
                 onPressed: state.resume,
+              ),
             )
           else
-              IconButton(
+            Container(
+              alignment: .center,
+              width: 48,
+              child: IconButton(
                 tooltip: L10n.of(context).pause,
                 icon: const Icon(Icons.pause_circle_outline_outlined),
                 onPressed: state.pause,
               ),
+            ),
           Text(time),
           Expanded(
             child: LayoutBuilder(
@@ -88,13 +98,11 @@ class RecordingInputRow extends StatelessWidget {
                     child: CircularProgressIndicator.adaptive(),
                   )
                 : const Icon(Icons.send_outlined),
-              onPressed: state.isSending
+            onPressed: state.isSending ? null : () => state.stopAndSend(onSend),
-                  ? null
-                  : () => state.stopAndSend(onSend),
           ),
+          const SizedBox(width: 4),
         ],
       ),
-      ),
     );
   }
 }