UPD: Big layout changes.

App now looks like an app.

src/App.vue

@@ -12,18 +12,17 @@ const currentConfigPage = ref('profile_settings')
 
 </script>
 <template>
-  <main class="select-none">
+  <main class="select-none w-screen h-screen flex flex-col">
-    <Navbar />
+    <Navbar class="flex-none" />
-    <div class="grid grid-cols-11">
+    <div class="flex-1 min-h-0 flex flex-row">
-      <ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+      <ProfileManager class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="col-span-4 border-solid border-0 border-r">
+      <div class="basis-1/3 flex-1 flex flex-col border-solid border-0 border-r">
-        <DevicePreview />
+        <DevicePreview class="flex-col flex flex-none" />
-        <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
+        <ConfigSection class="flex-none" :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt" />
-          <ConfigSelect v-model="currentConfigPage" />
+        <ConfigSelect v-model="currentConfigPage" class="overflow-y-auto flex-1" />
-        </ConfigSection>
       </div>
       <ConfigPane
-        class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
+        class="flex-1 basis-1/3 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
         :page="currentConfigPage" />
     </div>
   </main>

src/assets/main.css

@@ -4,6 +4,25 @@
     input[type="number"]::-webkit-inner-spin-button,
     input[type="number"]::-webkit-outer-spin-button {
         -webkit-appearance: none;
-        margin: 0;
     }
 }
+
+body {
+    overflow: hidden;
+    --scrollbar-foreground: rgb(39 39 42);
+    --scrollbar-background: black;
+    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+}
+
+::-webkit-scrollbar-thumb { /* Foreground */
+    background: var(--scrollbar-foreground);
+}
+
+::-webkit-scrollbar-track { /* Background */
+    background: var(--scrollbar-background);
+}

src/components/config/ConfigPane.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
+      class="flex-none px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
       <div>
         <h1 class="text-lg">
           <ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
@@ -11,8 +11,10 @@
         </p>
       </div>
     </div>
+    <div class="overflow-y-auto">
       <component :is="configPages[page]" />
     </div>
+  </div>
 </template>
 <script setup>
 import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'

src/components/device/DevicePreview.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="px-4 py-5">
+    <div class="px-4 pt-5 pb-3">
       <h1 class="text-lg">
         {{ $t('preview.title') }}
       </h1>
     </div>
     <div class="flex justify-center">
       <div
-        class="flex bg-cover m-6 w-full aspect-square"
+        class="flex bg-cover mb-6 w-72 aspect-square"
         style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
         <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">

src/components/profile/ProfileButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-12 flex profile-row"
+    class="h-12 flex"
     @mouseenter="hover=true" @mouseleave="hover=false">
     <form
       v-if="nameEditable && editing"

src/components/profile/ProfileManager.vue

@@ -1,4 +1,5 @@
 <template>
+  <div>
     <div>
       <div
         class="w-full px-4 h-20 flex items-center">
@@ -13,6 +14,7 @@
         </div>
       </div>
       <Separator />
+    </div>
     <div>
       <div class="flex w-full h-12 items-center">
         <label for="filter" class="flex h-full items-center cursor-text">
@@ -22,13 +24,15 @@
           id="filter"
           v-model="filter"
           :placeholder="$t('profiles.filter_placeholder')"
-          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
+          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
         <button
           class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
           <Plus />
         </button>
       </div>
       <Separator />
+    </div>
+    <div class="overflow-y-auto">
       <div v-if="filteredProfiles.length === 0">
         <div class="flex flex-col items-center justify-center h-32">
           <ScrambleText
@@ -36,7 +40,7 @@
             :text="$t('profiles.not_found')" />
         </div>
       </div>
-      <div>
+      <div v-else>
         <Collapsible
           v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
           v-model:open="collapse[profileTag]"

src/data/nanoConfig.json

@@ -314,6 +314,110 @@
       "guiConfig": {
         "guiEnable": true
       }
+    },
+    {
+      "id": "1337",
+      "name": "Brought to you by...",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
+    },
+    {
+      "id": "0420",
+      "name": "Overflow Testing Inc.",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
     }
   ]
 }

src/lang/en.json

@@ -22,7 +22,7 @@
         "output_ramp_dampening": "Output Ramp Dampening",
         "title": "Haptic Response"
       },
-      "subtitle": "Feedback mode selector and parameter adjustment",
+      "subtitle": "Adjust haptic and auditory feedback",
       "title": "Feedback Designer",
       "total_positions": "Total Positions"
     },
@@ -98,9 +98,9 @@
   },
   "profiles": {
     "filter_placeholder": "Filter Profiles...",
+    "name_placeholder": "Profile name",
     "not_found": "No profiles found ;-;",
     "subtitle": "Customize to your heart's content",
-    "title": "Device Profiles",
+    "title": "Device Profiles"
-    "name_placeholder": "Profile name"
   }
 }

src/main.js

@@ -14,8 +14,8 @@ if (ess) {
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 1100,
+    width: 1024,
-    height: 912,
+    height: 768,
     icon: path.join(__dirname, `/assets/favicon.png`),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),