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 || {}),
     }"
   >
@@ -26,5 +26,7 @@ import type { DrawerProps } from '@nuxt/ui'
  * Wrapper around UDrawer that automatically applies safe area insets for mobile devices.
  * Passes through all props and slots to UDrawer.
  */
-defineProps</* @vue-ignore */ DrawerProps>()
+const props = defineProps</* @vue-ignore */ DrawerProps>()
+
+const { ui } = toRefs(props)
 </script>

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
-  )
 }
 
 /**