Adds item size switching functionality and styles

src/components/Settings/ItemSizeSelector.vue

@@ -2,11 +2,11 @@
   <div>
     <span class="options-label">Icon Size</span>
     <div class="display-options">
-      <IconSmall @click="updateIconSize('default')"
+      <IconSmall @click="updateIconSize('small')" v-tooltip="tooltip('Small')"
         :class="`layout-icon ${iconSize === 'small' ? 'selected' : ''}`" />
-      <IconMedium class="layout-icon" @click="updateIconSize('horizontal')"
+      <IconMedium @click="updateIconSize('medium')" v-tooltip="tooltip('Medium')"
         :class="`layout-icon ${iconSize === 'medium' ? 'selected' : ''}`" />
-      <IconLarge class="layout-icon" @click="updateIconSize('vertical')"
+      <IconLarge @click="updateIconSize('large')" v-tooltip="tooltip('Large')"
         :class="`layout-icon ${iconSize === 'large' ? 'selected' : ''}`" />
     </div>
   </div>
@@ -36,6 +36,9 @@ export default {
     updateIconSize(iconSize) {
       this.$emit('iconSizeUpdated', iconSize);
     },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>

src/components/Settings/KeyboardShortcutInfo.vue

@@ -5,8 +5,8 @@
       <div class="close" title="Hide forever [Esc]" @click="hideWelcomeHelper()">x</div>
       <p title="Press [Esc] to hide this tip forever. See there's even a shortcut for that! 🚀">
         Just start typing to filter. Then use the tab key to cycle through results,
-        and press enter to launch the selected item. You can hit Esc at anytime to
-        clear the search. Easy 🥳
+        and press enter to launch the selected item, or alt + enter to open in a modal.
+        You can hit Esc at anytime to clear the search. Easy 🥳
       </p>
     </div>
   </transition>

src/components/Settings/LayoutSelector.vue

@@ -2,11 +2,11 @@
   <div>
     <span class="options-label">Layout</span>
     <div class="display-options">
-      <IconDeafault @click="updateDisplayLayout('default')"
+      <IconDeafault @click="updateDisplayLayout('default')" v-tooltip="tooltip('Auto')"
         :class="`layout-icon ${displayLayout === 'default' ? 'selected' : ''}`" />
-      <IconHorizontal class="layout-icon" @click="updateDisplayLayout('horizontal')"
+      <IconHorizontal @click="updateDisplayLayout('horizontal')" v-tooltip="tooltip('Horizontal')"
         :class="`layout-icon ${displayLayout === 'horizontal' ? 'selected' : ''}`" />
-      <IconVertical class="layout-icon" @click="updateDisplayLayout('vertical')"
+      <IconVertical @click="updateDisplayLayout('vertical')" v-tooltip="tooltip('Vertical')"
         :class="`layout-icon ${displayLayout === 'vertical' ? 'selected' : ''}`" />
     </div>
   </div>
@@ -36,6 +36,9 @@ export default {
     updateDisplayLayout(layout) {
       this.$emit('layoutUpdated', layout);
     },
+    tooltip(content) {
+      return { content, trigger: 'hover focus', delay: 250 };
+    },
   },
 };
 </script>

src/components/Settings/SettingsContainer.vue

@@ -66,6 +66,7 @@ export default {
     border-radius: 20px 0 0;
     background: var(--background);
     div {
+      margin-left: 0.5rem;
       opacity: 0.85;
       &:hover { opacity: 1; }
     }

src/components/Settings/ThemeSelector.vue

@@ -81,7 +81,6 @@ export default {
   flex-direction: column;
   align-items: flex-start;
   height: 100%;
-  padding: 0 1rem;
   span.theme-label {
     font-size: 1rem;
     color: var(--primary);