refactor: Improve app responsiveness and layout across different screen sizes

Author: onabicycle

src/components/SortingVisualizer/index.jsx

@@ -258,11 +258,11 @@ const SortingVisualizer = ({ onDarkModeChange }) => {
     };
 
     return (
-        <div className={`p-4 w-full min-h-screen mx-auto ${isDarkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
-            <div className="max-w-4xl mx-auto">
+        <div className={`p-2 sm:p-4 w-full min-h-screen mx-auto ${isDarkMode ? 'bg-gray-900 text-white' : 'bg-white text-black'}`}>
+            <div className="max-w-4xl mx-auto px-2 sm:px-0">
             {/* Controls section */}
-            <div className="mb-2 flex gap-4 justify-between items-start">
-                <div className="flex gap-4">
+            <div className="mb-2 flex flex-col sm:flex-row gap-4 justify-between items-start">
+                <div className="flex flex-wrap gap-2 sm:gap-4">
                     <select
                         value={selectedAlgorithm}
                         onChange={(e) => {
@@ -358,7 +358,7 @@ const SortingVisualizer = ({ onDarkModeChange }) => {
             </div>
 
             {/* Action buttons section */}
-            <div className="mb-4 flex gap-4">
+            <div className="mb-4 flex flex-wrap gap-2 sm:gap-4">
                 <Button
                     onClick={shuffleArray}
                     disabled={isSorting}
@@ -393,7 +393,7 @@ const SortingVisualizer = ({ onDarkModeChange }) => {
             )}
 
             {/* Stats Panel */}
-            <div className="mb-4 grid grid-cols-4 gap-4 text-sm">
+            <div className="mb-4 grid grid-cols-2 sm:grid-cols-4 gap-2 sm:gap-4 text-sm">
                 <div className={`p-2 rounded ${isDarkMode ? 'bg-gray-800' : 'bg-gray-100'}`}>
                     <div className="font-semibold">Sorted</div>
                     <div>{stats.sortedPercentage}%</div>
@@ -413,7 +413,7 @@ const SortingVisualizer = ({ onDarkModeChange }) => {
             </div>
 
             {/* Visualization section */}
-            <div className={`h-96 ${isDarkMode ? 'bg-black' : 'bg-gray-100'} relative overflow-hidden`}>
+            <div className={`h-48 sm:h-72 md:h-96 ${isDarkMode ? 'bg-black' : 'bg-gray-100'} relative overflow-hidden rounded-lg`}>
                 {visualizationMode === VISUALIZATION_MODES.CIRCLE ? (
                     // Radial visualization with thin bars
                     <div className="w-full h-full relative transform-gpu">

src/index.css

@@ -72,5 +72,29 @@
   }
   body {
     @apply bg-background text-foreground;
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
   }
-}
+  
+  /* Responsive text sizes */
+  html {
+    font-size: 14px;
+  }
+  @screen sm {
+    html {
+      font-size: 16px;
+    }
+  }
+  @screen lg {
+    html {
+      font-size: 16px;
+    }
+  }
+}
+
+/* Prevent content from becoming too small on tiny screens */
+@layer utilities {
+  .min-safe {
+    min-width: min(65ch, 100%);
+  }
+}

tailwind.config.js

@@ -9,9 +9,19 @@ export default {
     theme: {
         container: {
             center: true,
-            padding: "2rem",
+            padding: {
+                DEFAULT: '1rem',
+                sm: '2rem',
+                lg: '4rem',
+                xl: '5rem',
+                '2xl': '6rem',
+            },
             screens: {
-                "2xl": "1400px",
+                sm: '640px',
+                md: '768px',
+                lg: '1024px',
+                xl: '1280px',
+                '2xl': '1400px',
             },
         },
         extend: {
@@ -58,4 +68,4 @@ export default {
         },
     },
     plugins: ["tailwindcss-animate"],
-}
+}