fix: spacing.

lib/main.dart

@@ -54,7 +54,7 @@ class _AppwriteStarterKit extends State<AppwriteStarterKit> {
             children: [
               SingleChildScrollView(
                 child: Column(
-                  spacing: 16,
+                  spacing: context.isLargeScreen ? 64 : 32,
                   children: [
                     TopPlatformView(status: _status),
                     ConnectionStatusView(

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.125,
       ),
       child: Flex(
         direction: Axis.horizontal,

lib/ui/components/getting_started_cards.dart

@@ -2,6 +2,30 @@ import 'package:appwrite_flutter_starter_kit/utils/extensions/build_context.dart
 import 'package:flutter/material.dart';
 import 'package:url_launcher/url_launcher.dart';
 
+const cardWidgets = [
+  GeneralInfoCard(
+    title: "Edit your app",
+    link: null,
+    subtitle: HighlightedText(),
+  ),
+  GeneralInfoCard(
+    title: "Head to Appwrite Cloud",
+    link: "https://cloud.appwrite.io",
+    subtitle: 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: Text(
+      "Discover the full power of Appwrite by diving into our documentation",
+      style: TextStyle(fontSize: 14, color: Color(0xFF56565C)),
+    ),
+  ),
+];
+
 /// A widget that contains a list of informational cards displayed vertically.
 class GettingStartedCards extends StatelessWidget {
   const GettingStartedCards({super.key});
@@ -9,39 +33,28 @@ class GettingStartedCards extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 16.0),
+      padding: const EdgeInsets.all(16.0),
-      child: Column(
+      child: context.isLargeScreen
-        mainAxisSize: MainAxisSize.min,
+          ? Wrap(
-        children: [
+              spacing: 16,
-          GeneralInfoCard(
+              runSpacing: 16,
-            title: "Edit your app",
+              alignment: WrapAlignment.center,
-            link: null,
+              children: cardWidgets
-            subtitle: const HighlightedText(),
+                  .map((card) => SizedBox(
-          ),
+                        width: 350,
-          GeneralInfoCard(
+                        child: card,
-            title: "Head to Appwrite Cloud",
+                      ))
-            link: "https://cloud.appwrite.io",
+                  .toList(),
-            subtitle: const Text(
+            )
-              "Start managing your project from the Appwrite console",
+          : Column(
-              style: TextStyle(
+              mainAxisSize: MainAxisSize.min,
-                fontSize: 14,
+              children: cardWidgets
-                color: Color(0xFF56565C),
+                  .map((card) => Padding(
-              ),
+                        padding: const EdgeInsets.only(bottom: 16),
+                        child: card,
+                      ))
+                  .toList(),
             ),
-          ),
-          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),
-              ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 }

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';
@@ -18,13 +19,24 @@ class TopPlatformView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Padding(
-      mainAxisAlignment: MainAxisAlignment.center,
+      // web has extra padding on top.
-      children: <Widget>[
+      padding:
-        PlatformIcon(child: FlutterLogo(size: 40)),
+          context.isLargeScreen ? EdgeInsets.only(top: 85) : EdgeInsets.zero,
-        ConnectionLine(show: status == Status.success),
+      child: Row(
-        PlatformIcon(child: AppwriteIcon(size: 40)),
+        mainAxisAlignment: MainAxisAlignment.center,
-      ],
+        children: <Widget>[
+          PlatformIcon(
+            size: context.isLargeScreen ? 185 : 100,
+            child: FlutterLogo(size: context.isLargeScreen ? 100 : 40),
+          ),
+          ConnectionLine(show: status == Status.success),
+          PlatformIcon(
+            size: context.isLargeScreen ? 185 : 100,
+            child: AppwriteIcon(size: context.isLargeScreen ? 100 : 40),
+          ),
+        ],
+      ),
     );
   }
 }
@@ -51,7 +63,7 @@ class PlatformIcon extends StatelessWidget {
       height: size,
       decoration: BoxDecoration(
         color: const Color(0xFFFAFAFD),
-        borderRadius: BorderRadius.circular(24),
+        borderRadius: BorderRadius.circular(context.isLargeScreen ? 44 : 24),
         border: Border.all(color: const Color(0x0A19191C), width: 1),
         boxShadow: [
           BoxShadow(
@@ -67,7 +79,7 @@ class PlatformIcon extends StatelessWidget {
           height: size * 0.86,
           decoration: BoxDecoration(
             color: Colors.white,
-            borderRadius: BorderRadius.circular(16),
+            borderRadius: BorderRadius.circular(context.isLargeScreen ? 32 : 16),
             border: Border.all(color: const Color(0xFFFAFAFB), width: 1),
             boxShadow: [
               BoxShadow(

lib/ui/icons/appwrite.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 class AppwriteIcon extends StatelessWidget {
-  final double size; // Desired width, height scales accordingly
+  final double size;
   final Color color;
 
   const AppwriteIcon({