fix(ui): improve responsiveness of SchemaPage

Author: eddyseed

frontend/src/App.tsx

@@ -19,9 +19,9 @@ function App() {
               <LoadingProvider>
                 <Navbar01 />
                 <SchemaPage />
-                <TestDetailsPane />
-                <TestRunner />
-                <Dashboard />
+                {/* <TestDetailsPane /> */}
+                {/* <TestRunner /> */}
+                {/* <Dashboard /> */}
               </LoadingProvider>
             </TerminalProvider>
           </FileProvider>

frontend/src/components/ui/navbar.tsx

@@ -6,7 +6,7 @@ const Navbar01: React.FC = () => {
             <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
                 <a href="/" className="flex items-center space-x-3 rtl:space-x-reverse">
                     <img src="/favicon-16x16.png" className="h-8" alt="Website Logo" />
-                    <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">OpenAPI Tester</span>
+                    <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">OpenAPI Tester</span>
                 </a>
                 <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
                     <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">

frontend/src/features/schema-input/index.module.scss

@@ -11,3 +11,34 @@
     }
   }
 }
+@media only screen and (max-width: 768px) {
+  .schema_page {
+    height: auto;
+    .activity_area {
+      grid-template-columns: none;
+      grid-template-rows: repeat(2, 1fr);
+      & > div:first-child {
+        padding: 1rem 0;
+        & > section {
+          height: 50vh !important;
+        }
+      }
+      & > div:last-child {
+        padding: 1rem 1.5rem;
+        & > header {
+          &>h1{
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+          }
+          & > div {
+            flex-direction: column;
+            & > button {
+              margin: 0;
+              margin-bottom: 0.75rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}