refactor: responsive

src/components/shared/SelectZone.vue

@@ -11,7 +11,6 @@ const selectedItem = defineModel<unknown[]>('selectedItem', { default: [] });
 
 const props = withDefaults(
   defineProps<{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     items: any;
     newItems?: any;
     color?: string;
@@ -78,7 +77,6 @@ function assignSelect(to: unknown[], from: unknown[]) {
 }
 </script>
 <template>
-  {{ console.log(selectedItem) }}
   <section class="full-width column">
     <header
       class="row items-center q-px-md q-py-sm"
@@ -86,14 +84,19 @@ function assignSelect(to: unknown[], from: unknown[]) {
     >
       <div class="col-12 col-md"><slot name="top"></slot></div>
 
-      <ToggleView v-model="viewMode" class="q-mr-sm full-height" />
+      <div class="row items-stretch col-12 col-md-4 no-wrap">
+        <ToggleView
+          v-model="viewMode"
+          class="q-mr-sm"
+          style="margin-left: 0; !important"
+        />
 
         <q-input
           for="input-search"
           outlined
           dense
+          class="col"
           :label="$t('general.search')"
-        class="col-12 col-md-3"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="search"
           debounce="300"
@@ -102,15 +105,17 @@ function assignSelect(to: unknown[], from: unknown[]) {
             <q-icon name="mdi-magnify" />
           </template>
         </q-input>
+      </div>
     </header>
     <slot name="tab"></slot>
 
     <section class="col q-ma-md">
       <div
         v-if="items.length > 0 || newItems.length > 0"
-        class="column"
+        class="column full-height relative-position"
         style="gap: var(--size-4)"
       >
+        <div style="inset: 0" class="absolute scroll">
           <!-- NOTE: START - item -->
           <div class="row q-col-gutter-md">
             <TableProductAndService
@@ -141,9 +146,9 @@ function assignSelect(to: unknown[], from: unknown[]) {
               </template>
             </TableProductAndService>
           </div>
+        </div>
         <!-- NOTE: END - item -->
       </div>
-
       <div v-else class="flex justify-center full-height">
         <span class="col column items-center justify-center app-text-muted">
           <q-avatar style="background: var(--surface-0)" class="q-mb-md">