UPD: Redo main col layout

src/App.vue

@@ -14,17 +14,17 @@ const currentConfigPage = ref('profile_settings')
 <template>
   <main class="select-none">
     <Navbar />
-    <div class="flex flex-row">
+    <div class="grid grid-cols-11">
-      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
+      <ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="border-solid border-0 border-r" style="width: 25rem">
+      <div class="col-span-4 border-solid border-0 border-r">
         <DevicePreview />
         <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
           <ConfigSelect v-model="currentConfigPage" />
         </ConfigSection>
       </div>
       <ConfigPane
-        :page="currentConfigPage"
+        class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
-        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+        :page="currentConfigPage" />
     </div>
   </main>
 </template>

src/components/config/pages/HapticConfig.vue

@@ -1,7 +1,4 @@
 <template>
-  <TabsContent value="haptic-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
   <ConfigSection
     :title="$t('config_options.feedback_designer.feedback_type.title')"
     :icon-component="GaugeCircle">
@@ -44,13 +41,8 @@
               {value:2, label: 'Normal'},
               {value:3, label: 'Loud'}]" />
   </ConfigSection>
-      </ScrollArea>
-      <Separator />
-    </div>
-  </TabsContent>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import SteppedSlider from '@/components/config/SteppedSlider.vue'

src/components/config/pages/LEDsConfig.vue

@@ -1,7 +1,4 @@
 <template>
-  <TabsContent value="led-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
   <ConfigSection
     :title="$t('config_options.light_designer.led_feedback')" :icon-component="Lightbulb"
     :show-toggle="true">
@@ -13,12 +10,8 @@
   <ConfigSection :title="$t('config_options.light_designer.led_colors')" :icon-component="Palette">
     <PaletteInput v-model="colors" />
   </ConfigSection>
-      </ScrollArea>
-    </div>
-  </TabsContent>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Lightbulb, Palette } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import PaletteInput from '@/components/config/PaletteInput.vue'

src/components/config/pages/MappingConfig.vue

@@ -1,7 +1,4 @@
 <template>
-  <TabsContent value="map-config" class="mt-0">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
   <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
     <Tabs default-value="fd">
       <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
@@ -52,7 +49,6 @@
       </TabsList>
 
     </Tabs>
-
     <Separator />
     <Command>
 
@@ -133,7 +129,7 @@
   </ConfigSection>
 
   <ConfigSection
-:title="$t('config_options.mapping_configuration.knob_mapping.title')"
+    :title="$t('config_options.mapping_configuration.knob_mapping.title')"
     :icon-component="GaugeCircle">
     <div class="flex flex-col p-8 pt-4">
       <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
@@ -170,18 +166,10 @@
         <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
         <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
       </div>
-
     </div>
   </ConfigSection>
-      </ScrollArea>
-      <Separator />
-
-
-    </div>
-  </TabsContent>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Badge } from '@/components/ui/badge/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
 import {

src/components/config/pages/ProfileConfig.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="w-96">
   <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
     <WIP />
     <div class="hidden">
@@ -58,7 +57,6 @@
       <span class="pt-4">{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
     </p>
   </ConfigSection>
-  </div>
 </template>
 <script setup>
 import { Label } from '@/components/ui/label/index.js'

src/components/device/DevicePreview.vue

@@ -1,57 +1,30 @@
 <template>
-  <div>
   <div>
     <div class="px-4 py-5">
       <h1 class="text-lg">
-          {{ $t('preview.title')}}
+        {{ $t('preview.title') }}
       </h1>
     </div>
     <div class="flex justify-center">
       <div
-          class="flex bg-cover w-72 h-72 mb-7"
+        class="flex bg-cover m-6 w-full aspect-square"
         style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
-          <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+        <div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
           <div class="self-center w-8 mb-1 opacity-50">
             <img src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
           </div>
-            <h2 v-for="feedbackConfig in profiles" :key="feedbackConfig" class="self-center font-pixellg text-5xl ">
+          <h2 class="self-center font-pixellg text-5xl ">1337</h2>
-              {{ feedbackConfig.pos }}</h2>
+          <div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
-
+          <DeviceBar class="self-center" />
-            <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
+          <span
-            <DeviceBar class="self-center"/>
+            class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
-            <div id="scales" class="flex self-center text-xs py-0" />
+            Profile description will go here!
-
+          </span>
-            <div
-              v-for="profileConfig in profiles"
-              :key="profileConfig"
-              class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
-              {{ profileConfig.profileDesc }}
-            </div>
-          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
-<script>
+<script setup>
-import axios from 'axios'
 import DeviceBar from '@/components/device/DeviceBar.vue'
-
-export default {
-  name: 'DevicePreview',
-  components: { DeviceBar },
-  data() {
-    return {
-      profiles: [],
-    }
-  },
-  async created() {
-    try {
-      const res = await axios.get('http://localhost:3001/profiles/5867')
-      this.profiles = res.data
-    } catch (e) {
-      console.error(e)
-    }
-  },
-}
 </script>