Mass action tag layout updated

app/Resources/static/themes/material/css/entries.scss

@@ -34,6 +34,10 @@
   }
 }
 
+.mass-action-button--tags {
+  border-radius: 2px 0 0 2px;
+}
+
 .entry-checkbox {
   margin: 10px 15px 10px 5px;
 
@@ -66,18 +70,18 @@
 .mass-action-tags {
   display: flex;
   margin-top: 10px;
-  align-items: center;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 10px;
 
   .mass-action-tags-input.mass-action-tags-input {
     margin: 0;
-    min-width: 230px;
+    padding: 0 5px;
+    height: 34px;
+    background: white;
+    border-bottom: 3px solid #c5ebef;
   }
 
-  .mass-action-tags-button {
-    white-space: nowrap;
+  .mass-action-tags-input.mass-action-tags-input.mass-action-tags-input:focus {
+    border-bottom: 3px solid $blue-accent-color;
+    box-shadow: none;
   }
 }
 
@@ -206,6 +210,7 @@ footer {
 
   .mass-action-tags {
     margin-top: 0;
+    margin-left: 7px;
     flex-wrap: initial;
   }
 
@@ -213,15 +218,9 @@ footer {
     display: flex;
     margin-top: 10px;
     align-items: center;
-    gap: 30px;
 
-    .mass-action-tags-button {
-      line-height: 2;
-    }
-
-    .mass-action-tags-input.mass-action-tags-input,
-    .mass-action-tags-button {
-      height: 2rem;
+    .mass-action-tags-input.mass-action-tags-input {
+      height: 21px;
     }
   }
 }

src/Wallabag/CoreBundle/Resources/views/Entry/entries.html.twig

@@ -53,13 +53,11 @@
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-read" title="{{ 'entry.list.toogle_as_read'|trans }}"><i class="material-icons">done</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="toggle-star" title="{{ 'entry.list.toogle_as_star'|trans }}" ><i class="material-icons">star</i></button>
                 <button class="mass-action-button btn cyan darken-1" type="submit" name="delete" onclick="return confirm('{{ 'entry.confirm.delete_entries'|trans|escape('js') }}')" title="{{ 'entry.list.delete'|trans }}"><i class="material-icons">delete</i></button>
-                <label for="mass-action-tags-displayed" class="mass-action-button btn cyan darken-1" type="button" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></label>
             </div>
 
-            <input id="mass-action-tags-displayed" class="toggle-checkbox" type="checkbox" />
             <div class="mass-action-tags">
+                <button class="btn cyan darken-1 mass-action-button mass-action-button--tags" type="submit" name="tag" title="{{ 'entry.list.add_tags'|trans }}"><i class="material-icons">label</i></button>
                 <input type="text" class="mass-action-tags-input" name="tags" placeholder="{{ 'entry.list.mass_action_tags_input_placeholder'|trans }}" />
-                <button class="btn cyan darken-1 mass-action-tags-button" type="submit" name="tag">{{ 'entry.list.add_tags'|trans }}</button>
             </div>
         </div>