Fix display of long tags

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss

@@ -87,6 +87,7 @@
     font-size: 1.2em;
     transition-duration: 0.1s;
     width: 100%;
+    background-color: $background-lighter-05;
 
     app-tag-item {
         margin: auto auto auto 0.25em;
@@ -94,12 +95,12 @@
 }
 
 .selectable-tag:hover {
-    background-color: $background-lighter-05;
+    background-color: $background-lighter-10;
 }
 
 .selectable-tag:active {
     cursor: pointer;
-    background-color: $background-lighter-10;
+    background-color: $background;
 }
 
 cdk-virtual-scroll-viewport {

mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss

@@ -1,11 +1,18 @@
 @import "src/colors";
 
+:host {
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+}
+
 .tag-item-wrapper {
-    display: inline;
     width: 100%;
     padding: 0.25em;
-    word-break: break-all;
     text-overflow: ellipsis;
+    word-break: keep-all;
+    overflow: hidden;
+    margin: auto;
 }
 
 .tag-item-namespace {