Fix display of long tags

Signed-off-by: trivernis <trivernis@protonmail.com>
Trivernis · Feb 12, 2022 · fbe516a · fbe516a
1 parent f788d19
commit fbe516a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 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
@@ -87,19 +87,20 @@
  font-size: 1.2em;
  transition-duration: 0.1s;
  width: 100%;
+ background-color: $background-lighter-05;
 
  app-tag-item {
  margin: auto auto auto 0.25em;
  }
 }
 
 .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
@@ -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 {