UI: Made sidebar occupy full width on narrow screens

pages/index.html

@@ -7,7 +7,7 @@
 
 <div class="d-flex flex-wrap">
   <!-- Sidebar -->
-  <div id="sidebar" class="border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
+  <div id="sidebar" class="col border-right shadow-lg flex-shrink-1 p-2 d-flex flex-column align-items-stretch bg-body-tertiary" style="width: 380px;">
     <a href="/" class="d-flex align-items-center flex-shrink-0 p-3 link-body-emphasis text-decoration-none border-bottom">
       <img class="bi pe-none me-2" width="30" height="24" src="/static/images/arrows-fullscreen.svg">
       <span class="fs-5 fw-semibold">Categories</span>
@@ -35,7 +35,7 @@
   </div>
 
   <!-- Groups -->
-  <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5">
+  <div class="d-flex flex-column flex-grow-1 flex-md-row p-4 gap-4 py-md-5 col">
   <div class="list-group flex-grow-1">
     {{ range .Groups }}
       <div class="list-group-item list-group-item-action d-flex gap-3 py-3" aria-current="true">