fix(mobile): width on tablet view

This commit is contained in:
Elian Doran 2025-03-23 20:03:24 +02:00
parent 6312bd8817
commit 6aee38337e
No known key found for this signature in database
2 changed files with 11 additions and 5 deletions

View File

@ -130,7 +130,7 @@ export default class MobileLayout {
.id("mobile-rest-container") .id("mobile-rest-container")
.child( .child(
new SidebarContainer("tree", "column") new SidebarContainer("tree", "column")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3") .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
.id("mobile-sidebar-wrapper") .id("mobile-sidebar-wrapper")
.css("max-height", "100%") .css("max-height", "100%")
.css("padding-left", "0") .css("padding-left", "0")
@ -142,10 +142,6 @@ export default class MobileLayout {
new ScreenContainer("detail", "column") new ScreenContainer("detail", "column")
.id("detail-container") .id("detail-container")
.class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9") .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
.css("padding-left", "0")
.css("padding-right", "0")
.css("max-height", "100%")
.css("position", "relative")
.child( .child(
new FlexContainer("row") new FlexContainer("row")
.contentSized() .contentSized()

View File

@ -1315,6 +1315,12 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
} }
/* Mobile, phone mode */ /* Mobile, phone mode */
#detail-container {
max-height: 100%;
position: relative;
}
@media (max-width: 991px) { @media (max-width: 991px) {
body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show, body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show,
body.mobile #launcher-container .dropdown > .dropdown-menu.show { body.mobile #launcher-container .dropdown > .dropdown-menu.show {
@ -1354,6 +1360,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
z-index: 2000; z-index: 2000;
} }
#detail-container {
width: 100%;
}
#mobile-sidebar-container.show #mobile-sidebar-wrapper { #mobile-sidebar-container.show #mobile-sidebar-wrapper {
transform: translateX(0); transform: translateX(0);
} }