UPD: Feedback type buttons

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() {