scroll fixed

app/pages/dashboard.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { TableColumn } from "@nuxt/ui"
+//import UBadge from "@nuxt/ui";
 import { h } from 'vue'
 
   definePageMeta({
@@ -114,14 +115,14 @@ import { h } from 'vue'
     {
       accessorKey: 'amount',
       header: "Ammount",
-      cell: ({ row }) => { return "€" + row.getValue('amount') }
+      cell: ({ row }) => { return h('span', {class: "text-success"},"€" + row.getValue('amount')) }
     }
   ]
 
 </script>
 
 <template>
-  <UContainer>
+  <UContainer class="overflow-auto">
     
     <UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
 
@@ -139,16 +140,25 @@ import { h } from 'vue'
             :description="card.desc"
             :icon="card.icon"
             variant="subtle"
-            class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
+            class="dark-widget-bg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl  sm:rounded-2xl"
           />
       </UPageGrid>
 
+    <div class="max-w-full flex-shrink-0 overflow-y-visible">
+      <UTable :data="table_demo" :columns="table_headers" class="flex-1 "/>
+    </div>
 
-    <UTable :data="table_demo" :columns="table_headers"/>
+
+    <UFooter>
+      <p>footer</p>
+    </UFooter>
   </UContainer>
 </template>
 
 <style scoped>
-@import "bootstrap/dist/css/bootstrap-grid.css";
 
+body {
+  overflow: hidden;
+  height: 100%;
+}
 </style>