From fbe516a7df63f14f037899bdd73b7ac1aeb8a594 Mon Sep 17 00:00:00 2001
From: trivernis <trivernis@protonmail.com>
Date: Sat, 12 Feb 2022 18:00:24 +0100
Subject: [PATCH] Fix display of long tags

Signed-off-by: trivernis <trivernis@protonmail.com>
---
 .../sidebar/file-search/file-search.component.scss    |  5 +++--
 .../shared/tag/tag-item/tag-item.component.scss       | 11 +++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss b/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
index 4ece189..655023a 100644
--- a/mediarepo-ui/src/app/components/shared/sidebar/file-search/file-search.component.scss
+++ b/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 {
diff --git a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss b/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss
index 5a9d645..e0dbeb8 100644
--- a/mediarepo-ui/src/app/components/shared/tag/tag-item/tag-item.component.scss
+++ b/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 {