chore(ui): make tags less bulbous

leg100 · Aug 13, 2023 · df1645d · df1645d
1 parent 5b88474
commit df1645d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/internal/http/html/static/css/input.css b/internal/http/html/static/css/input.css
@@ -75,6 +75,9 @@
   th, td {
     @apply p-2;
   }
+  .tag-container {
+    @apply flex flex-wrap gap-1 items-center
+  }
   .tag {
     @apply text-sm rounded-lg bg-blue-800 text-white font-semibold p-1
   }

diff --git a/internal/http/html/static/css/output.css b/internal/http/html/static/css/output.css
@@ -611,6 +611,13 @@ th, td {
   padding: 0.5rem;
 }
 
+.tag-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
 .tag {
   border-radius: 0.5rem;
   --tw-bg-opacity: 1;

diff --git a/internal/http/html/static/templates/content/workspace_get.tmpl b/internal/http/html/static/templates/content/workspace_get.tmpl
@@ -61,14 +61,14 @@
       <div class="flex flex-col gap-2">
         <h3 class="font-semibold mb-1">Tags</h3>
         {{ with .Workspace.Tags }}
-          <div id="tags" class="flex flex-wrap gap-1">
+          <div id="tags" class="tag-container">
             {{ range . }}
               <form action="{{ deleteTagWorkspacePath $.Workspace.ID }}" method="POST">
                 <input type="hidden" name="tag_name" id="remove-tag-name" value="{{ . }}" required>
                 <div class="flex gap-1 items-center tag">
                   <span>{{ . }}</span>
                   {{ if $.CanRemoveTags }}
-                    <button class="btn text-md p-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
+                    <button class="text-md px-1 rounded-full bg-blue-800 hover:bg-white hover:text-blue-800 text-white shadow-transparent" id="button-remove-tag-{{ . }}" class="delete cross">x</button>
                   {{ end }}
                 </div>
               </form>

diff --git a/internal/http/html/static/templates/partials/workspace_item.tmpl b/internal/http/html/static/templates/partials/workspace_item.tmpl
@@ -9,7 +9,7 @@
     <div>
       <div class="flex gap-2 items-center">
         {{ template "identifier" . }}
-        <form action="{{ workspacesPath .Organization }}" method="GET">
+        <form class="flex items-center gap-2" action="{{ workspacesPath .Organization }}" method="GET">
           {{ range .Tags }}
             <button class="tag" name="search[tags]" value="{{ . }}">{{ . }}</button>
           {{ end }}