From 30f1a5bf9daac70477d5f77b95a88f45c46550d0 Mon Sep 17 00:00:00 2001
From: Jack Harper <jack.harper@stfc.ac.uk>
Date: Tue, 12 Nov 2024 10:37:48 +0000
Subject: [PATCH] layout fixes - fix overflow, make desktop use white space,
 reduce padding on mobile, keep table headers etc. fixed at w-1/3

---
 app/components/Block.tsx                         |  6 +++---
 app/components/Group.tsx                         | 12 ++++++------
 app/components/InstrumentPage.tsx                |  2 +-
 app/components/__snapshots__/Block.test.tsx.snap |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/components/Block.tsx b/app/components/Block.tsx
index 50c10da..dc9ad0d 100644
--- a/app/components/Block.tsx
+++ b/app/components/Block.tsx
@@ -45,7 +45,7 @@ export default function Block({
         setShowAdvanced(!showAdvanced);
       }}
     >
-      <td className="py-1 px-4">
+      <td className="py-1 px-2 w-1/3">
         <a
           className="underline"
           href={
@@ -60,7 +60,7 @@ export default function Block({
         </a>
       </td>
 
-      <td className="py-1 px-4 ">
+      <td className="py-1 px-2 w-1/3">
         <span id={pv.human_readable_name + "_VALUE"}>
           {showAdvanced && "Readback: "}
           {pv.value} {pv.units != null && pv.units}
@@ -91,7 +91,7 @@ export default function Block({
           )}
         </span>
       </td>
-      <td className="py-1 px-4 flex justify-between items-center">
+      <td className="py-1 px-2  flex justify-between items-center">
         <span id={pv.human_readable_name + "_VALUE_RC"}>
           {pv.runcontrol_enabled && (pv.runcontrol_inrange ? "✅" : "❌")}
         </span>
diff --git a/app/components/Group.tsx b/app/components/Group.tsx
index 0cd97ec..7928d2a 100644
--- a/app/components/Group.tsx
+++ b/app/components/Group.tsx
@@ -28,14 +28,14 @@ export default function Group({
         {group.name}
       </h1>
       <table className="text-sm table-fixed">
-        <thead>
-          <tr className="bg-blue-gray-100 text-gray-100">
-            <th className="py-3 px-4 text-left">Block</th>
-            <th className="py-3 px-4 text-left">Value</th>
-            <th className="py-3 px-4 text-left">In-Range</th>
+        <thead className="sticky">
+          <tr className="bg-blue-gray-100 text-gray-100 border-b-2 border-b-gray-400">
+            <th className="py-2 px-2 text-left w-1/3">Block</th>
+            <th className="py-2 px-2 text-left w-1/3">Value</th>
+            <th className="py-2 px-2 text-left w-1/3">In-Range</th>
           </tr>
         </thead>
-        <tbody className="text-gray-200 ">
+        <tbody className="text-gray-200 sticky">
           {group.blocks.map((pv) => {
             return (
               <Block
diff --git a/app/components/InstrumentPage.tsx b/app/components/InstrumentPage.tsx
index d11cd66..7e989ab 100644
--- a/app/components/InstrumentPage.tsx
+++ b/app/components/InstrumentPage.tsx
@@ -264,7 +264,7 @@ function InstrumentData({ instrumentName }: { instrumentName: string }) {
     return <h1>Loading...</h1>;
   }
   return (
-    <div className="p-8 w-full mx-auto max-w-7xl">
+    <div className="p-2 md:p-8 w-full mx-auto">
       <TopBar
         dashboard={currentInstrument.dashboard}
         instName={instName}
diff --git a/app/components/__snapshots__/Block.test.tsx.snap b/app/components/__snapshots__/Block.test.tsx.snap
index 234abff..2731fa3 100644
--- a/app/components/__snapshots__/Block.test.tsx.snap
+++ b/app/components/__snapshots__/Block.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders topbar unchanged 1`] = `
     class="border-b border-blue-gray-200 transition duration-100 hover:bg-gray-100 hover:text-black"
   >
     <td
-      class="py-1 px-4"
+      class="py-1 px-2 w-1/3"
     >
       <a
         class="underline"
@@ -15,7 +15,7 @@ exports[`renders topbar unchanged 1`] = `
       />
     </td>
     <td
-      class="py-1 px-4 "
+      class="py-1 px-2 w-1/3"
     >
       <span
         id="undefined_VALUE"
@@ -32,7 +32,7 @@ exports[`renders topbar unchanged 1`] = `
       </span>
     </td>
     <td
-      class="py-1 px-4 flex justify-between items-center"
+      class="py-1 px-2  flex justify-between items-center"
     >
       <span
         id="undefined_VALUE_RC"