From 755961dc0a0a38150fdb21205993db1731392b54 Mon Sep 17 00:00:00 2001
From: Vehbi Sinan Tunalioglu <vst@vsthost.com>
Date: Thu, 25 Apr 2024 13:03:29 +0800
Subject: [PATCH] fix(website): fix host details panel heights

Not ideal, but we can scroll sidebar and content areas separately now.
---
 website/src/components/report/App.tsx     | 11 +++++++----
 website/src/components/report/Sidebar.tsx |  2 +-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/website/src/components/report/App.tsx b/website/src/components/report/App.tsx
index 833b7d1..71467dd 100644
--- a/website/src/components/report/App.tsx
+++ b/website/src/components/report/App.tsx
@@ -40,16 +40,19 @@ export function App({ data, onFlushRequest }: { data: HostPatrolReport; onFlushR
         <Tab key="overview" title="🏖️ Overview" className="py-0">
           <TabOverview data={data} />
         </Tab>
-        1
+
         <Tab key="tabulate-hosts" title="🗒️ Tabulate Hosts" className="py-0">
           <TabTabulateHosts data={data} setHost={setHost} />
         </Tab>
+
         <Tab key="show-host-details" title="🔬 Host Details" className="py-0">
           <TabShowHostDetails data={data} host={host} setHost={setHost} />
         </Tab>
+
         <Tab key="ssh-keys" title="🛂 SSH Keys" className="py-0">
           <TabSshKeys data={data} />
         </Tab>
+
         <Tab key="flush" title="❌ Flush Data" className="py-0"></Tab>
       </Tabs>
     </div>
@@ -76,12 +79,12 @@ export function TabShowHostDetails({
   setHost: (x: Maybe<HostReport>) => void;
 }) {
   return (
-    <div className="grid grid-cols-6">
-      <div className="border-r bg-gray-100 shadow-lg">
+    <div className="flex flex-1 flex-row overflow-y-hidden">
+      <div className="border-r bg-gray-100 shadow-lg sm:w-64">
         <Sidebar data={data.hosts} onHostSelect={(x) => setHost(Just(x))} />
       </div>
 
-      <div className="col-span-5">
+      <div className="max-h-[80vh] flex-1 overflow-y-scroll">
         {host.caseOf({
           Nothing: () => <div className="p-4 text-red-400">Choose a host to view details.</div>,
           Just: (x) => <ShowHostDetails data={data} host={x} />,
diff --git a/website/src/components/report/Sidebar.tsx b/website/src/components/report/Sidebar.tsx
index 9858b11..a1f860f 100644
--- a/website/src/components/report/Sidebar.tsx
+++ b/website/src/components/report/Sidebar.tsx
@@ -10,7 +10,7 @@ export interface SidebarProps {
 
 export function Sidebar({ data, onHostSelect }: SidebarProps) {
   return (
-    <Listbox aria-label="Sidebar" items={data}>
+    <Listbox aria-label="Sidebar" items={data} classNames={{ base: 'max-h-[80vh] overflow-y-scroll' }}>
       {/*  @ts-ignore */}
       {(host) => (
         <ListboxItem key={host.host.name} onPress={() => onHostSelect(host)}>