refactor: responsive styling

Author: devvaannsh

src/extensionsIntegrated/CustomSnippets/htmlContent/snippets-panel.html

@@ -1,8 +1,7 @@
 <div id="custom-snippets-panel" class="custom-snippets-panel bottom-panel vert-resizable top-resizer no-focus">
-    <!--the toolbar at the top-->
-    <div id="custom-snippets-toolbar" class="custom-snippets-toolbar">
-        <div class="toolbar-left-section">
-            <div class="toolbar-title">Custom Snippets <span id="snippets-count" class="snippets-count"></span></div>
+    <div id="custom-snippets-toolbar" class="toolbar simple-toolbar-layout">
+        <div class="title-wrapper">
+            <span class="title toolbar-title">Custom Snippets <span id="snippets-count" class="snippets-count"></span></span>
             <div id="add-new-snippet-btn" class="custom-snippet-btn">
                 <button title="Add new snippet">
                     <i class="fas fa-plus"></i>
@@ -14,13 +13,13 @@
                 </button>
             </div>
         </div>
-
-        <div id="filter-snippets-panel" class="filter-snippets-panel">
-            <input id="filter-snippets-input" type="text" placeholder="Filter..." autocomplete="off" />
-        </div>
-
-        <div id="close-custom-snippets-panel-btn">
-            <button><i class="fas fa-times"></i></button>
+        <div class="buttons">
+            <div id="filter-snippets-panel" class="filter-snippets-panel">
+                <input id="filter-snippets-input" type="text" placeholder="Filter..." autocomplete="off" />
+            </div>
+            <div id="close-custom-snippets-panel-btn">
+                <button><i class="fas fa-times"></i></button>
+            </div>
         </div>
     </div>
 

src/styles/Extn-CustomSnippets.less

@@ -9,10 +9,6 @@
 
 #custom-snippets-toolbar {
     background-color: @bc-panel-bg-promoted;
-    padding: 5px 8px;
-    display: flex;
-    align-items: center;
-    position: relative;
     border-bottom: none;
     box-shadow:
         inset 0 1px 0 @bc-highlight,
@@ -25,13 +21,19 @@
             inset 0 1px 0 @dark-bc-highlight,
             0 -1px 3px @dark-bc-shadow-small;
     }
-}
 
-.toolbar-left-section {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex: 1;
+    .title-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex-wrap: wrap;
+    }
+
+    .buttons {
+        gap: 4px;
+        flex-wrap: wrap;
+        align-items: center;
+    }
 }
 
 .toolbar-title {
@@ -72,9 +74,6 @@
 
 .filter-snippets-panel {
     display: inline-block;
-    position: absolute;
-    top: 6px;
-    right: 40px;
 }
 
 .filter-snippets-panel.hidden {
@@ -83,33 +82,27 @@
 
 .filter-snippets-panel #filter-snippets-input {
     height: 14px;
-    width: 220px;
-}
-
-
-#close-custom-snippets-panel-btn {
-    position: absolute;
-    top: 9px;
-    right: 7px;
+    width: 180px;
+    min-width: 120px;
+    margin-bottom: 0;
+    margin-top: -4px;
 }
 
 #close-custom-snippets-panel-btn button {
-    // remove all the default styling
     background: transparent;
     border: none;
     outline: none;
-
     font-size: 13px;
     opacity: 0.7;
     color: @bc-text;
 
     .dark & {
         color: @dark-bc-text;
     }
-}
 
-#close-custom-panel-btn button:hover {
-    opacity: 0.9;
+    &:hover {
+        opacity: 0.9;
+    }
 }
 
 #custom-snippets-list.hidden {
@@ -778,3 +771,48 @@
         }
     }
 }
+
+@media (max-width: 600px) {
+    #custom-snippets-toolbar {
+        .title-wrapper {
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 4px;
+
+            .custom-snippet-btn {
+                align-self: stretch;
+
+                button {
+                    width: 100%;
+                }
+            }
+        }
+
+        .buttons {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 2px;
+            width: 100%;
+
+            .filter-snippets-panel,
+            #close-custom-snippets-panel-btn {
+                width: 100%;
+                display: flex;
+                justify-content: center;
+            }
+
+            .filter-snippets-panel #filter-snippets-input {
+                width: 100%;
+                min-width: auto;
+            }
+        }
+    }
+}
+
+@media (max-width: 400px) {
+    #custom-snippets-toolbar {
+        .title-wrapper {
+            margin-bottom: 4px;
+        }
+    }
+}