From 59575b98934b83a678472543bd406c062b437f7a Mon Sep 17 00:00:00 2001
From: RossAscends <124905043+RossAscends@users.noreply.github.com>
Date: Fri, 28 Apr 2023 16:26:54 +0900
Subject: [PATCH] improved tags styling

---
 public/index.html |  4 ++--
 public/style.css  | 32 ++++++++++++++++++++++++++------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/public/index.html b/public/index.html
index dd2b14d87..826543e0b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
     <link href="css/fontawesome.css" rel="stylesheet">
     <link href="css/solid.css" rel="stylesheet">
     <link href="css/jquery-ui.min.css" rel="stylesheet">
- 
+
     <link rel="apple-touch-icon" sizes="57x57" href="img/apple-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="img/apple-icon-72x72.png" />
     <link rel="apple-touch-icon" sizes="114x114" href="img/apple-icon-114x114.png" />
@@ -1474,7 +1474,7 @@
                             <hr>
 
                             <div id="tags_div">
-                                <div class="margin-bot-10px">Tags</div>
+                                <!-- <div class="margin-bot-10px">Tags</div> -->
                                 <input id="tagInput" class="text_pole" placeholder="Search / Create tags" maxlength="50" />
                                 <div id="tagList" class="tags"></div>
                             </div>
diff --git a/public/style.css b/public/style.css
index 64d916738..50fc8b015 100644
--- a/public/style.css
+++ b/public/style.css
@@ -859,6 +859,7 @@ input[type="file"] {
     flex-grow: 1;
     display: flex;
     flex-direction: column;
+    row-gap: 5px;
 }
 
 #rm_ch_create_block {
@@ -988,7 +989,7 @@ select option:not(:checked) {
     display: flex;
     flex-direction: row;
     align-items: center;
-    margin: 10px 5px;
+    margin: 5px;
     column-gap: 10px;
 }
 
@@ -2322,6 +2323,10 @@ h5 {
     grid-template-columns: 340px auto;
 }
 
+#tags_div {
+    min-width: 0;
+}
+
 .tag {
     border-radius: 5px;
     border-style: solid;
@@ -2337,6 +2342,7 @@ h5 {
     align-items: center;
     gap: 10px;
     width: fit-content;
+    min-width: 0;
     text-shadow: none !important;
 }
 
@@ -2349,23 +2355,37 @@ h5 {
 }
 
 .tags {
-    margin: 5px 0;
+
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: flex-start;
-    column-gap: 0.4rem;
-    row-gap: 0.4rem;
+    column-gap: 0.2rem;
+    row-gap: 0.2rem;
+}
+
+#tagList.tags {
+    margin: 5px 0;
 }
 
 .tags.tags_inline {
     position: absolute;
-    margin: 2px 10px;
+    margin-right: 5px;
     right: 0;
     opacity: 0.6;
     column-gap: 0.2rem;
-    flex-wrap: nowrap;
+    row-gap: 0.2rem;
     justify-content: flex-end;
+    max-width: 50%;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.tag_name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-align: left;
+    white-space: nowrap;
 }
 
 .tags_inline .tag {