From d90132e68ae4a89c8ce8dd7a9616cfe85c2a951f Mon Sep 17 00:00:00 2001
From: Wes <wesbillman@users.noreply.github.com>
Date: Thu, 5 Oct 2023 13:29:34 -0700
Subject: [PATCH] feat: add hover to cards and fix sidepanel bottom margin
 (#457)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![Screenshot 2023-10-05 at 1 19
39 PM](https://github.com/TBD54566975/ftl/assets/51647/ce955cf0-3f2d-45a5-9f40-94ee051fb189)
![Screenshot 2023-10-05 at 1 19
44 PM](https://github.com/TBD54566975/ftl/assets/51647/b2be44b9-fbe7-4fd6-bd2a-37e2dd42249f)
![Screenshot 2023-10-05 at 1 20
05 PM](https://github.com/TBD54566975/ftl/assets/51647/476e4231-f878-49b3-8579-1c31ede7709e)
---
 console/client/src/components/Card.tsx  | 2 +-
 console/client/src/layout/SidePanel.tsx | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/console/client/src/components/Card.tsx b/console/client/src/components/Card.tsx
index 58108480a6..fbeb25a2be 100644
--- a/console/client/src/components/Card.tsx
+++ b/console/client/src/components/Card.tsx
@@ -10,7 +10,7 @@ export const Card = ({ topBarColor, className, onClick, children }: Props) => {
     <div
       onClick={onClick}
       className={`relative rounded-md border border-gray-200 dark:border-gray-500 ${
-        onClick ? 'cursor-pointer' : ''
+        onClick ? 'cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700' : ''
       } ${className}`}
     >
       {topBarColor && (
diff --git a/console/client/src/layout/SidePanel.tsx b/console/client/src/layout/SidePanel.tsx
index 26efe99ff3..688a4c2fbc 100644
--- a/console/client/src/layout/SidePanel.tsx
+++ b/console/client/src/layout/SidePanel.tsx
@@ -1,14 +1,14 @@
 import { Transition } from '@headlessui/react'
 import { Fragment, useContext } from 'react'
 import { SidePanelContext } from '../providers/side-panel-provider'
-import { sidePanelColor } from '../utils/style.utils'
 import { bgColor, textColor } from '../utils'
+import { sidePanelColor } from '../utils/style.utils'
 
 export const SidePanel = () => {
   const { isOpen, component } = useContext(SidePanelContext)
 
   return (
-    <div className={`absolute z-20 top-0 ${bgColor} ${textColor}`}>
+    <div className={`absolute z-20 top-0 border border-red-500 ${bgColor} ${textColor}`}>
       <Transition
         show={isOpen}
         as={Fragment}
@@ -22,9 +22,7 @@ export const SidePanel = () => {
         <div
           className={`fixed right-0 w-1/3 h-full ${sidePanelColor} dark:bg-slate-800 dark:shadow-black-600 shadow-2xl`}
         >
-          <div className='overflow-y-auto' style={{ maxHeight: 'calc(100vh - 2rem)' }}>
-            {component}
-          </div>
+          <div className='overflow-y-auto h-full'>{component}</div>
         </div>
       </Transition>
     </div>