Improve UiDrawer styling and viewport calculations

src/components/haex/workspace/drawer.vue

@@ -8,7 +8,7 @@
     description="Workspaces"
   >
     <template #content>
-      <div class="pl-8 pr-4 h-full overflow-y-auto">
+      <div class="pl-8 pr-4 overflow-y-auto py-8">
         <!-- Workspace Cards -->
         <div class="flex flex-col gap-3">
           <HaexWorkspaceCard

src/components/ui/Drawer.vue

@@ -3,7 +3,7 @@
     v-bind="$attrs"
     :ui="{
       content:
-        'pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] w-dvw max-w-md sm:max-w-fit',
+        'pb-[env(safe-area-inset-bottom)] pt-[env(safe-area-inset-top)] ',
       ...(ui || {}),
     }"
   >

src/utils/viewport.ts

@@ -13,7 +13,7 @@ export interface ViewportDimensions {
  */
 export function getViewportDimensions(): ViewportDimensions {
   const viewportWidth = window.innerWidth
-  const viewportHeight = window.innerHeight - 60 // Subtract tab bar height
+  const viewportHeight = window.innerHeight - 40 // Subtract header height
 
   // Get safe-area-insets from CSS variables
   const safeAreaTop = parseFloat(
@@ -45,11 +45,7 @@ export function getViewportDimensions(): ViewportDimensions {
  */
 export function getAvailableContentHeight(): number {
   const dimensions = getViewportDimensions()
-  return (
+  return dimensions.height - dimensions.safeAreaTop - dimensions.safeAreaBottom
-    dimensions.height -
-    dimensions.safeAreaTop -
-    dimensions.safeAreaBottom
-  )
 }
 
 /**