diff --git a/assets/css/layout.css b/assets/css/layout.css
index a4b6df6bf..d48794965 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -7,6 +7,7 @@ body {
 
 body {
   --sidebarWidth: 300px;
+  --sidebarMinWidth: 300px;
   --sidebarTransitionDuration: 0.3s;
   background-color: var(--background);
   color: var(--textBody);
@@ -23,7 +24,6 @@ body {
 
 .main {
   display: flex;
-  justify-content: flex-end;
   height: 100%;
 }
 
@@ -31,11 +31,13 @@ body {
   display: flex;
   flex-direction: column;
   width: var(--sidebarWidth);
+  min-width: var(--sidebarMinWidth);
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
+  resize: horizontal;
 }
 
 .sidebar-button {
diff --git a/assets/css/search-bar.css b/assets/css/search-bar.css
index df5ba8526..9a0ba9c0d 100644
--- a/assets/css/search-bar.css
+++ b/assets/css/search-bar.css
@@ -128,7 +128,7 @@
     height: 57px;
     left: 56px;
     right: 20px;
-    transition: top 0.3s;
+    transition: top var(--sidebarTransitionDuration) ease-in-out;
     z-index: 99;
   }
 
@@ -139,7 +139,7 @@
     right: 0;
     height: 70px;
     background-color: var(--background);
-    transition: top 0.3s;
+    transition: all var(--sidebarTransitionDuration) ease-in-out;
     z-index: 98;
   }
 
diff --git a/assets/js/sidebar/sidebar-drawer.js b/assets/js/sidebar/sidebar-drawer.js
index 1a67dd5fb..aef9d37fc 100644
--- a/assets/js/sidebar/sidebar-drawer.js
+++ b/assets/js/sidebar/sidebar-drawer.js
@@ -204,3 +204,11 @@ function setPreference () {
         : (state.sidebarPreference = userPref.CLOSED)
   }
 }
+
+const resizeObserver = new ResizeObserver((entries) => {
+  for (const entry of entries) {
+    document.body.style.setProperty('--sidebarWidth', `${entry.contentRect.width}px`);
+  }
+});
+
+resizeObserver.observe(document.getElementById('sidebar'));