improved tags styling

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>

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 {