Merge pull request #878 from gbengaoluwadahunsi/workingBench-OptionUI

Adjusted Workbench html page option dropdown UI responsiveness on mobile view "
camicroscope · Apr 24, 2024 · c9c12b7 · c9c12b7
2 parents 3417f7e + 263e762
commit c9c12b7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/apps/dev-workbench/workbench.css b/apps/dev-workbench/workbench.css
@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: row;
 }
-.navbar-brand{
+.navbar-brand {
   margin-right: 10rem !important;
 }
 /* All display none */
@@ -40,22 +40,30 @@
   display: none;
 }
 
-
-#goBack{
+#goBack {
   display: flex;
   margin: 0 1rem;
 }
 @media only screen and (max-width: 551px) {
   nav {
     flex-direction: column;
   }
-  
+
   nav ul {
     flex-direction: column;
   }
-  
+
   nav ul li {
     margin: 10px 0;
   }
 }
 
+.dropdown-menu {
+  margin-left: -5em !important;
+}
+
+@media (max-width: 425px) {
+  .dropdown-menu {
+    margin-left: 0 !important;
+  }
+}
diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
@@ -70,7 +70,7 @@
       <div style="cursor: pointer;" id="goBack">
         <i data-feather="arrow-left" class="text-white"></i>
       </div>
-      
+
       <!-- Navbar brand --> 
 
       <div class="navbar-brand-div flex-grow-1">
@@ -81,6 +81,7 @@
 
 
       <ul class="navbar-nav mr-auto px-2">
+
         <!-- Dropdown -->
         <li