diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html index c79a99e..71fe6b3 100644 --- a/frontends/etiquette_flask/templates/clipboard.html +++ b/frontends/etiquette_flask/templates/clipboard.html @@ -24,35 +24,37 @@ } #right { + grid-row-gap: 8px; grid-template: - "add_tag_area" - "remove_tag_area" - "refresh_metadata_area" - "searchhidden_area" - "download_zip_area" - "message_area" 1fr; + "toolbox" auto + "message_area" 1fr + / 1fr; +} +#toolbox +{ + display: grid; + grid-auto-rows: min-content; grid-row-gap: 8px; } -#right > * +#toolbox > * { display: flex; } -#right input +#toolbox input { margin: 0; } -#right .spinner_holder +#toolbox .spinner_holder { display: flex; flex: 1; } -#right button +#toolbox button { flex: 1; } -#add_tag_area { grid-area: add_tag_area; } -#remove_tag_area { grid-area: remove_tag_area; } - +#toolbox { grid-area: toolbox; } +#message_area { grid-area: message_area; } #add_tag_area input, #remove_tag_area input { @@ -64,20 +66,14 @@ flex: initial; } -#refresh_metadata_area { grid-area: refresh_metadata_area; } -#searchhidden_area { grid-area: searchhidden_area; } -#download_zip_area { grid-area: download_zip_area; } -#message_area -{ - grid-area: message_area; -} @media screen and (max-width: 800px) { #content_body { grid-template: "left" 1fr - "right" 200px; + "right" 200px + / 1fr !important; } #right { @@ -89,13 +85,8 @@ height: 200px; grid-template: - "add_tag_area message_area" - "remove_tag_area message_area" - "refresh_metadata_area message_area" - "searchhidden_area message_area" - "download_zip_area message_area" - "extra message_area" 1fr - /1fr minmax(50px, 200px); + "toolbox message_area" 1fr + /1fr minmax(50px, 200px); } } @@ -114,27 +105,29 @@