feat: add hover to cards and fix sidepanel bottom margin (#457)

![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

@@ -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 && (

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>