tag-browser: Draw main ui over the sidebar on narrow screens

html_resources/main.css

@@ -165,16 +165,29 @@ pre > div{
     display: none;
   }
   .categoryList{
+    opacity: 0.6;
+  }
+  #ui.no-content > #categories{
     opacity: 1;
   }
+  #site{
+    background-color: rgb(60,50,70);
+    min-height: 100vh;
+    border-inline-start: 1px solid gold;
+    box-shadow: 0 0 26px 0 black;
+  }
+  #ui > #site{
+    margin-left: 7ch;
+    position: relative;
+    z-index: 2;
+  }
+  #ui.no-content > #site{
+    z-index: -1;
+  }
   .banner{
     display: none;
   }
-  #site{
-    background-color: rgb(60,50,70);
-  }
-  #ui > #site{ margin-left: 22ch }
-  #targets{
-    position: relative;
+  #ui.no-content > #site > .banner{
+    display: block;
   }
 }

html_resources/selector.js

@@ -115,6 +115,12 @@ function getSecondaryCategories(list){
 }
 
 function showMatchingTargets(fileNames,setSelected = false){
+  {
+    let ui = document.getElementById("ui");
+    if(ui.classList.contains("no-content")){
+      ui.classList.remove("no-content")
+    }
+  }
   let bonus = 0;
   for(let c of Array.from(document.querySelectorAll(".target"))){
     if(fileNames.includes(c.dataset.filename)){

index.html

@@ -13,7 +13,7 @@
 <div id="placeholder">
   <div class="placeholder-text">FAILURE, resources could not be loaded properly</div>
 </div>
-<div id="ui" class="hidden">
+<div id="ui" class="hidden no-content">
   <div id="categories" class="categoryList">
   </div>
   <div id="secondaryCategories" class="categoryList">