UPD: Feedback type buttons

src/App.vue

@@ -15,7 +15,7 @@ const currentConfigPage = ref('profile_settings')
   <main class="select-none">
     <Navbar />
     <div class="flex flex-row">
-      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" style="width: 20rem" />
+      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
       <div class="border-solid border-0 border-r" style="width: 25rem">
         <DevicePreview />
         <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">

src/assets/base.css

@@ -106,19 +106,4 @@
   h1,h2,h3,h4,h5,h6{
     @apply font-heading;
   }
-
-  #scale div{
-    width: 2px;
-    margin-right: 2px;
-    height: 5px;
-    @apply bg-white;
-  }
-
-  #scale div.active{
-    @apply bg-orange-500;
-  }
-  #scale div.current{
-    @apply bg-orange-500;
-    height: 10px;
-  }
 }

src/assets/main.css

@@ -1,44 +1,5 @@
 @import './base.css';
 
-#app {
-
-    margin: 0 auto;
-    padding: 0rem 0rem !important;
-    font-weight: normal;
-}
-
-a,
-.green {
-    text-decoration: none;
-    color: hsla(160, 100%, 37%, 1);
-    transition: 0.4s;
-    padding: 3px;
-}
-
-.text-xs {
-    font-size: 0.625rem;
-    letter-spacing: 0.05em;
-}
-
-@media (hover: hover) {
-    a:hover {
-        background-color: hsla(160, 100%, 37%, 0.2);
-    }
-}
-
-@media (min-width: 1024px) {
-    body {
-        display: flex;
-        place-items: center;
-    }
-
-    #app {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        padding: 0 2rem;
-    }
-}
-
 @layer base {
     input[type="number"]::-webkit-inner-spin-button,
     input[type="number"]::-webkit-outer-spin-button {

src/components/config/ConnectionTypeButton.vue

@@ -9,7 +9,7 @@
       :src="icon" alt="connection-type-icon"
       class="w-24 size-w mb-2"
       :class="{'invert': selected}">
-    <ScrambleText ref="title" class="text-xs text-wrap" :text="title" />
+    <ScrambleText ref="title" :resize="false" class="text-xs text-wrap" :text="title" />
   </button>
 </template>
 <script setup>

src/components/config/FeedbackTypeButton.vue

@@ -1,15 +1,15 @@
 <template>
   <button
-    class="flex-1 flex flex-col justify-center items-center py-2"
+    class="flex-1 flex flex-col items-center py-2"
     :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
     'hover:bg-zinc-800 text-muted-foreground' : !selected}"
     @click="$emit('select'); $refs.title.scramble()">
     <img
       draggable="false"
       :src="icon" alt="connection-type-icon"
-      class="p-4"
+      class="w-16 py-2"
       :class="{'invert': selected}">
-    <ScrambleText ref="title" class="text-xs text-wrap" :text="title" />
+    <ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
   </button>
 </template>
 <script setup>

src/components/effects/ScrambleText.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  resize: {
+    type: Boolean,
+    default: true,
+  },
   delay: {
     type: Number,
     default: 0,
@@ -78,7 +82,7 @@ function replaceContent(text = props.text, replaceInterval = props.replaceInterv
 
 function scramble(scrambleAmount = props.scrambleAmount, replaceInterval = props.replaceInterval, fillInterval = props.fillInterval, characterSet = props.characterSet, text = props.text, fillText = props.text) {
   content.value = ''
-  const spec = Math.random() > 0.99
+  const spec = props.resize && (Math.random() > 0.99)
   let i = 0
   const specChars = atob('S09TUk8tRUFTVEVSRUdH')
   const fillContent = function() {