Add a few styles for narrower screens

Author: webpro

apps/web/src/css/lookup.css

@@ -1,20 +1,29 @@
 .center {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  gap: 1rem;
 }
 
 #lookup-container {
   .status-bar {
     width: 100%;
     justify-content: center;
-    padding: 0.5rem;
+    padding: 0.5rem 0;
     margin-bottom: 1rem;
+    overflow-x: auto;
+
     & input {
       font-size: 1.1rem;
     }
   }
+
+  .table-wrapper {
+    overflow-x: auto;
+  }
+
+  .table-wrapper table {
+    margin: 0;
+  }
 }
 
 #lookup-container pre {
@@ -30,3 +39,9 @@
   padding: 2px 6px;
   display: inline-block;
 }
+
+@media screen and (min-width: 1440px) {
+  .center {
+    align-items: center;
+  }
+}

apps/web/src/lookup.ts

@@ -55,20 +55,22 @@ export function renderLookupTable() {
             <input type="search" placeholder="Filter" autocomplete="off" .value=${query.value} @input=${handleSearch} />
           </div>
         </div>
-        <table class="ansi-codes">
-          <thead>
-            <tr>
-              <th>code</th>
-              <th>type</th>
-              <th>mnemonic</th>
-              <th>description</th>
-              <th>example</th>
-            </tr>
-          </thead>
-          <tbody id="ansi-codes-tbody">
-            ${rows.value}
-          </tbody>
-        </table>
+        <div class="table-wrapper">
+          <table class="ansi-codes">
+            <thead>
+              <tr>
+                <th>code</th>
+                <th>type</th>
+                <th>mnemonic</th>
+                <th>description</th>
+                <th>example</th>
+              </tr>
+            </thead>
+            <tbody id="ansi-codes-tbody">
+              ${rows.value}
+            </tbody>
+          </table>
+        </div>
 
         <p>
           Something missing or incorrect?