5 files changed, 30 insertions, 12 deletions

diff --git a/viewer/src/views/ItemThumbnail.vue b/viewer/src/views/ItemThumbnail.vue
index 1c9e206..bf33043 100644
--- a/viewer/src/views/ItemThumbnail.vue
+++ b/viewer/src/views/ItemThumbnail.vue
@@ -40,7 +40,7 @@
           size="4x"
         />
       </div>
-      {{ item.title }}
+      <div v-text="item.title" />
     </div>
   </div>
 </template>
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index d8b3300..30bfe97 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -26,7 +26,10 @@
     />
     <template v-else-if="galleryStore.config && galleryStore.galleryIndex">
       <LayoutTop :class="[$style.layout, $style.layoutTop]" />
-      <LayoutLeft :class="[$style.layout, $style.layoutLeft]" />
+      <LayoutLeft
+        v-show="!uiStore.fullWidth"
+        :class="[$style.layout, $style.layoutLeft]"
+      />
       <router-view
         ref="content"
         :class="[$style.layout, $style.layoutContent]"
diff --git a/viewer/src/views/item_handlers/AudioViewer.vue b/viewer/src/views/item_handlers/AudioViewer.vue
index da9579f..bbba7e5 100644
--- a/viewer/src/views/item_handlers/AudioViewer.vue
+++ b/viewer/src/views/item_handlers/AudioViewer.vue
@@ -20,7 +20,10 @@
 
 <template>
   <div class="flex-column container-vh-centering">
-    <ItemThumbnail :item="item" />
+    <ItemThumbnail
+      :item="item"
+      :class="$style.audiothumb"
+    />
     <audio
       :class="$style.player"
       :src="itemResourceUrl"
@@ -56,6 +59,12 @@ const itemFileName = computed(() => navigation.getFileName(props.item));
 </script>
 
 <style lang="scss" module>
+@import "~@/assets/scss/theme";
+
+.audiothumb {
+  color: $text-light;
+}
+
 .player {
   width: 100%;
   max-width: 500px;
diff --git a/viewer/src/views/layout/left/LayoutInformation.vue b/viewer/src/views/layout/left/LayoutInformation.vue
index 780a458..9dfb311 100644
--- a/viewer/src/views/layout/left/LayoutInformation.vue
+++ b/viewer/src/views/layout/left/LayoutInformation.vue
@@ -67,6 +67,7 @@ const formatDate = computed(() => {
 .infopanel {
   padding: 2px 2px 7px 7px;
   overflow-wrap: break-word;
+  max-height: 50%;
 
   .title {
     font-weight: bold;
@@ -80,13 +81,6 @@ const formatDate = computed(() => {
     > * {
       margin-top: 5px;
     }
-    ul,
-    ol {
-      margin-left: 1em;
-    }
-    ul {
-      list-style-type: disc;
-    }
     a {
       color: $palette-200;
       &:hover {
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue
index a37c546..9ee6f8a 100644
--- a/viewer/src/views/layout/left/LayoutTagInput.vue
+++ b/viewer/src/views/layout/left/LayoutTagInput.vue
@@ -23,7 +23,7 @@
     v-model="search"
     :placeholder="t('tagInput.placeholder')"
     :tabindex="50"
-    @focus="e => (e.target as HTMLInputElement).select()"
+    @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()"
     @keypress.enter="inputEnter"
     @keydown.backspace="inputBackspace"
   />
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue';
 import LdInput from '@/components/LdInput.vue';
 import { useIndexFactory } from '@/services/indexFactory';
 import { useGalleryStore } from '@/store/galleryStore';
-import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core';
+import { useUiStore } from '@/store/uiStore';
+import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core';
 import { computed, ref, StyleValue, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']);
 const model = useVModel(props, 'modelValue', emit);
 
 const { t } = useI18n();
+const uiStore = useUiStore();
 const galeryStore = useGalleryStore();
 const indexFactory = useIndexFactory();
 
@@ -88,6 +90,16 @@ const { focused } = useFocus(input);
 
 // ---
 
+const controlState = useKeyModifier('Control');
+onKeyStroke('k', e => {
+  if (!controlState.value || focused.value) return;
+  e.preventDefault();
+  uiStore.toggleFullWidth(false);
+  focused.value = true;
+});
+
+// ---
+
 const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false)
   .filter(filterAlreadyPresent)
   .sort((a, b) => b.items.length - a.items.length));