UI cleanups and improvements (#2548)

web/src/components/layout/scaffold/Scaffold.vue

@@ -3,7 +3,7 @@
     :go-back="goBack"
     :enable-tabs="enableTabs"
     :search="search"
-    :full-width="fullWidth"
+    :full-width="fullWidthHeader"
     @update:search="(value) => $emit('update:search', value)"
   >
     <template #title><slot name="title" /></template>
@@ -11,48 +11,39 @@
     <template v-if="$slots.tabActions" #tabActions><slot name="tabActions" /></template>
   </Header>
 
-  <FluidContainer v-if="fluidContent">
+  <slot v-if="fluidContent" />
+  <Container v-else>
     <slot />
-  </FluidContainer>
-  <slot v-else />
+  </Container>
 </template>
 
 <script setup lang="ts">
 import { toRef } from 'vue';
 
-import FluidContainer from '~/components/layout/FluidContainer.vue';
+import Container from '~/components/layout/Container.vue';
 import { useTabsProvider } from '~/compositions/useTabs';
 
 import Header from './Header.vue';
 
-export interface Props {
+const props = defineProps<{
   // Header
   goBack?: () => void;
   search?: string;
+  fullWidthHeader?: boolean;
 
   // Tabs
   enableTabs?: boolean;
   disableHashMode?: boolean;
-  activeTab: string;
+  activeTab?: string;
 
   // Content
   fluidContent?: boolean;
-  fullWidth?: boolean;
-}
+}>();
 
-const props = withDefaults(defineProps<Props>(), {
-  goBack: undefined,
-  search: undefined,
-  // eslint-disable-next-line vue/no-boolean-default
-  disableHashMode: false,
-  // eslint-disable-next-line vue/no-boolean-default
-  enableTabs: false,
-  activeTab: '',
-  // eslint-disable-next-line vue/no-boolean-default
-  fluidContent: true,
-});
-
-const emit = defineEmits(['update:activeTab', 'update:search']);
+const emit = defineEmits<{
+  (event: 'update:activeTab', value: string): void;
+  (event: 'update:search', value: string): void;
+}>();
 
 if (props.enableTabs) {
   useTabsProvider({