fix: layout issues and add a nice spinner.

lib/home.dart

@@ -26,7 +26,12 @@ class _AppwriteStarterKit extends State<AppwriteStarterKit> {
     return Scaffold(
       body: CheckeredBackground(
         child: SafeArea(
-          minimum: EdgeInsets.only(top: context.isLargeScreen ? 24 : 16),
+          minimum: EdgeInsets.only(
+              top: context.isExtraWideScreen
+                  ? 156
+                  : context.isLargeScreen
+                      ? 24
+                      : 32),
           child: Stack(
             children: [
               SingleChildScrollView(

lib/ui/components/collapsible_bottomsheet.dart

@@ -491,7 +491,7 @@ class LogsTableRow extends StatelessWidget {
           child: MouseRegion(
             cursor: SystemMouseCursors.click,
             child: Text(
-              response.substring(0, 50),
+              response.length >= 50 ? response.substring(0, 50) : response,
               maxLines: 1,
               overflow: TextOverflow.ellipsis,
               style: const TextStyle(

lib/ui/components/connection_line.dart

@@ -15,7 +15,7 @@ class ConnectionLine extends StatelessWidget {
     return SizedBox(
       width: context.widthFactor(
         mobileFactor: 0.25,
-        largeScreenFactor: 0.15,
+        largeScreenFactor: 0.1,
       ),
       child: Flex(
         direction: Axis.horizontal,

lib/ui/components/getting_started_cards.dart

@@ -1,3 +1,4 @@
+import 'package:appwrite_flutter_starter_kit/ui/components/responsive_layout.dart';
 import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart';
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -8,39 +9,85 @@ class GettingStartedCards extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          GeneralInfoCard(
-            title: "Edit your app",
-            link: null,
-            subtitle: const HighlightedText(),
-          ),
-          GeneralInfoCard(
-            title: "Head to Appwrite Cloud",
-            link: "https://cloud.appwrite.io",
-            subtitle: const Text(
-              "Start managing your project from the Appwrite console",
-              style: TextStyle(
-                fontSize: 14,
-                color: Color(0xFF56565C),
+    return ResponsiveLayout(
+      smallDeviceLayout: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            GeneralInfoCard(
+              title: "Edit your app",
+              link: null,
+              subtitle: const HighlightedText(),
+            ),
+            GeneralInfoCard(
+              title: "Head to Appwrite Cloud",
+              link: "https://cloud.appwrite.io",
+              subtitle: const Text(
+                "Start managing your project from the Appwrite console",
+                style: TextStyle(
+                  fontSize: 14,
+                  color: Color(0xFF56565C),
+                ),
               ),
             ),
-          ),
-          GeneralInfoCard(
-            title: "Explore docs",
-            link: "https://appwrite.io/docs",
-            subtitle: const Text(
-              "Discover the full power of Appwrite by diving into our documentation",
-              style: TextStyle(
-                fontSize: 14,
-                color: Color(0xFF56565C),
+            GeneralInfoCard(
+              title: "Explore docs",
+              link: "https://appwrite.io/docs",
+              subtitle: const Text(
+                "Discover the full power of Appwrite by diving into our documentation",
+                style: TextStyle(
+                  fontSize: 14,
+                  color: Color(0xFF56565C),
+                ),
               ),
             ),
-          ),
-        ],
+          ],
+        ),
+      ),
+      largeDeviceLayout: Padding(
+        padding: EdgeInsets.symmetric(
+            horizontal: context.isExtraWideScreen ? 64 : 16.0, vertical: 16.0),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          spacing: 16,
+          children: [
+            Flexible(
+              child: GeneralInfoCard(
+                title: "Edit your app",
+                link: null,
+                subtitle: const HighlightedText(),
+              ),
+            ),
+            Flexible(
+              child: GeneralInfoCard(
+                title: "Head to Appwrite Cloud",
+                link: "https://cloud.appwrite.io",
+                subtitle: const Text(
+                  "Start managing your project from the Appwrite console",
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Color(0xFF56565C),
+                  ),
+                ),
+              ),
+            ),
+            Flexible(
+              child: GeneralInfoCard(
+                title: "Explore docs",
+                link: "https://appwrite.io/docs",
+                subtitle: const Text(
+                  "Discover the full power of Appwrite by diving into our documentation",
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: Color(0xFF56565C),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }
@@ -68,9 +115,12 @@ class GeneralInfoCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraints) {
+      final double cardWidth = context.isExtraWideScreen
+          ? constraints.maxWidth.clamp(0, 350)
+          : constraints.maxWidth;
+
       return SizedBox(
-        // `1` because we already have padding on sides.
-        width: constraints.maxWidth * (context.isExtraWideScreen ? 0.55 : 1),
+        width: cardWidth,
         child: Card(
           elevation: 0,
           shape: RoundedRectangleBorder(

lib/ui/components/top_platform_view.dart

@@ -1,5 +1,6 @@
 import 'package:appwrite_flutter_starter_kit/data/models/status.dart';
 import 'package:appwrite_flutter_starter_kit/ui/icons/appwrite.dart';
+import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart';
 import 'package:flutter/material.dart';
 
 import 'connection_line.dart';
@@ -21,9 +22,15 @@ class TopPlatformView extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
-        PlatformIcon(child: FlutterLogo(size: 40)),
+        PlatformIcon(
+          size: context.isExtraWideScreen ? 142 : 100,
+          child: FlutterLogo(size: context.isExtraWideScreen ? 56 : 40),
+        ),
         ConnectionLine(show: status == Status.success),
-        PlatformIcon(child: AppwriteIcon(size: 40)),
+        PlatformIcon(
+          size: context.isExtraWideScreen ? 142 : 100,
+          child: AppwriteIcon(size: context.isExtraWideScreen ? 56 : 40),
+        ),
       ],
     );
   }
@@ -51,7 +58,7 @@ class PlatformIcon extends StatelessWidget {
       height: size,
       decoration: BoxDecoration(
         color: const Color(0xFFFAFAFD),
-        borderRadius: BorderRadius.circular(24),
+        borderRadius: BorderRadius.circular(context.isExtraWideScreen ? size * 0.2 : 24),
         border: Border.all(color: const Color(0x0A19191C), width: 1),
         boxShadow: [
           BoxShadow(
@@ -65,9 +72,10 @@ class PlatformIcon extends StatelessWidget {
         child: Container(
           width: size * 0.86,
           height: size * 0.86,
+          margin: context.isExtraWideScreen ? EdgeInsets.all(8) : null,
           decoration: BoxDecoration(
             color: Colors.white,
-            borderRadius: BorderRadius.circular(16),
+            borderRadius: BorderRadius.circular(context.isExtraWideScreen ? size * 0.2: 16),
             border: Border.all(color: const Color(0xFFFAFAFB), width: 1),
             boxShadow: [
               BoxShadow(