UPD: Sizing to fit fixed window

src/App.vue

@@ -27,7 +27,7 @@ onMounted(() => {
     <Navbar class="flex-none" />
     <div class="flex-1 min-h-0 flex flex-row">
       <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" />
+        class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
       <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />

src/components/Navbar.vue

@@ -57,19 +57,21 @@
       <Button variant="outline" class="app-titlebar-button">
         Disconnect
       </Button>
-      <div class="flex h-full w-32">
+      <div class="flex h-full">
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          v-if="resizeable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
-          <Minus class="h-5 w-5 mr-0.5" />
+          <Minus class="h-5 w-5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          v-if="resizeable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <Square class="h-3.5 w-3.5 mr-0.5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <X class="h-5 w-5 mr-0.5" />
         </button>
@@ -90,9 +92,12 @@ import {
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
+import { ref } from 'vue'
 
 const oi = (msg) => alert(msg)
 
+const resizeable = ref(false)
+
 </script>
 <style scoped>
 .app-titlebar {

src/components/config/ConfigPane.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="flex font-heading">
+    <div class="flex">
       <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
-          class="flex-1 p-4 items-center text-center group"
+          class="flex-1 h-12 items-center text-center group px-1 font-heading"
           :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
           @click="currentPage = index">
           {{ $t(option.titleKey) }}

src/components/device/DevicePreview.vue

@@ -3,11 +3,11 @@
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
       :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 95%, black), url(${RenderNano})`}">
-      <div class="px-4 pt-5 pb-3 flex justify-between items-baseline">
+      <div class="px-4 h-12 flex justify-between items-center">
-        <div class="font-heading text-lg">
+        <h2>
           {{ $t('preview.title') }}
-        </div>
+        </h2>
-        <div class="font-mono">
+        <div v-if="store.selectedProfile" class="font-mono text-sm">
           <span class="text-muted-foreground">Profile: </span>{{ store.selectedProfile.name }}
         </div>
       </div>

src/components/profile/ProfileManager.vue

@@ -2,13 +2,13 @@
   <div>
     <div>
       <div
-        class="w-full p-4 flex items-center justify-between">
+        class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <h1 class="text-lg">
+        <h2 class="mr-2">
           {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
           }})</span>
-        </h1>
+        </h2>
         <button
-          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square w-8 flex justify-center items-center"
+          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
           @click="store.addProfile">
           <Plus class="h-4" />
         </button>

src/main.js

@@ -14,9 +14,10 @@ if (ess) {
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 1024,
+    width: 1000,
-    height: 768,
+    height: 600,
     titleBarStyle: 'hidden',
+    resizable: false,
     icon: path.join(__dirname, `/assets/favicon.png`),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),