Image manager: supported a tabbed interface on mobile

[bookstack] / resources / sass / _components.scss

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 51d95236e2eec23ef91c48003a364b66811fb0b2..1a3e1669ef7713e8335f1fbf8b2db060d01ba129 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -380,6 +380,12 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     background-color: #FFF;
   }
 }
+
+@include smaller-than($s) {
+  .image-manager-filter-bar .contained-search-box input {
+    width: 180px;
+  }
+}
 .image-manager-filters {
   box-shadow: $bs-med;
   border-radius: 4px;
@@ -475,6 +481,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .image-manager-sidebar {
   width: 300px;
+  margin: 0 auto;
   overflow-y: auto;
   overflow-x: hidden;
   border-inline-start: 1px solid #DDD;
@@ -500,6 +507,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     }
   }
 }
+@include smaller-than($m) {
+  .image-manager-sidebar {
+    border-inline-start: 0;
+  }
+}
 
 .image-manager-content {
   display: flex;