.flex, .setting-content .content-body .side-menu ul li a, .option { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; height: 100%; } .setting-content { color: #727479; background: #dedede; width: 100%; height: 100%; position: absolute; } .setting-content .content-title { font-size: clamp(16px, 3.5vw, 22px); } .setting-content .content-body { display: flex; padding-top: 2vh; height: 100%; gap: 1.3vw; } .setting-content .content-body .side-menu { background-color: #f7f7f7; border: 1px solid #f0f0f0; border-radius: 0.5vw; width: min(250px, 32vw); box-shadow: inset -0.2vh -0.2vh 0.4vh rgba(0,0,0,0.05); } .setting-content .content-body .side-menu ul li { margin: 0.2vh 0.3vw; } .setting-content .content-body .side-menu ul li.active { background: #fff; box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15); } .setting-content .content-body .side-menu ul li:hover { background: #fff; box-shadow: 0 0.2vh 0.3vh rgba(0,0,0,0.15); } .setting-content .content-body .side-menu ul li a { padding: 1.3vh 0 1.3vh 1.3vw; width: 95%; } .setting-content .content-body .side-menu ul li a span { font-size: 13px; } .setting-content .content-body .side-menu ul li a i { margin-right: 20px; } .setting-content .content-body .main-body { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; max-height: 100%; overflow-x: scroll !important; overflow-y: scroll !important; scrollbar-gutter: stable; /* Force horizontal scrollbar to always be visible */ min-width: 100%; width: 100%; } /* Ensure scrollbars are always visible with proper styling for all admin pages */ .setting-content .content-body .main-body::-webkit-scrollbar { width: 12px; height: 12px; display: block !important; visibility: visible !important; } .setting-content .content-body .main-body::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 6px; display: block !important; visibility: visible !important; } .setting-content .content-body .main-body::-webkit-scrollbar-thumb { background: #888; border-radius: 6px; display: block !important; visibility: visible !important; } .setting-content .content-body .main-body::-webkit-scrollbar-thumb:hover { background: #555; } .setting-content .content-body .main-body::-webkit-scrollbar-corner { background: #f1f1f1; } /* Ensure tables and content are wide enough to trigger horizontal scrolling */ .setting-content .content-body .main-body table { min-width: 1200px !important; width: max-content !important; table-layout: auto !important; } /* Force tables to always trigger horizontal scrolling */ .setting-content .content-body .main-body table td, .setting-content .content-body .main-body table th { white-space: nowrap; min-width: 120px; } /* Ensure there's enough content to trigger vertical scrolling */ .setting-content .content-body .main-body { min-height: calc(100vh - 200px); padding-bottom: 50px; } /* Force horizontal scrollbar to always be visible at bottom */ .setting-content .content-body .main-body { position: relative; } /* Add invisible content to force horizontal scrolling when needed */ .setting-content .content-body .main-body::after { content: ''; display: block; width: 100vw; height: 1px; position: absolute; bottom: 0; left: 0; pointer-events: none; } .setting-content .content-body .main-body ul li { padding: 0.5rem 0.5rem; } .setting-content .content-body .main-body ul li a .is-checked { border-bottom: 2px solid #2980b9; border-right: 2px solid #2980b9; } .setting-content .content-body .main-body ul li a span { padding: 0 0.5rem; } .setting-content .content-body .main-body ul li .admin-announcement, .setting-content .content-body .main-body ul li .admin-accessibility, .setting-content .content-body .main-body ul li .invite-people, .setting-content .content-body .main-body ul li .layout { padding-left: 20px; } .setting-content .content-body .main-body ul li .admin-announcement li, .setting-content .content-body .main-body ul li .admin-accessibility li, .setting-content .content-body .main-body ul li .invite-people li, .setting-content .content-body .main-body ul li .layout li { min-width: 500px; } .setting-content .content-body .main-body ul li .admin-announcement li ul.no-margin-bottom, .setting-content .content-body .main-body ul li .admin-accessibility li ul.no-margin-bottom, .setting-content .content-body .main-body ul li .invite-people li ul.no-margin-bottom, .setting-content .content-body .main-body ul li .layout li ul.no-margin-bottom { margin-bottom: 0; } .setting-content .content-body .main-body ul li .admin-announcement li .bg-white a, .setting-content .content-body .main-body ul li .admin-accessibility li .bg-white a, .setting-content .content-body .main-body ul li .invite-people li .bg-white a, .setting-content .content-body .main-body ul li .layout li .bg-white a { background: #f7f7f7; } .setting-content .content-body .main-body ul li .admin-announcement li .bg-white a.is-checked, .setting-content .content-body .main-body ul li .admin-accessibility li .bg-white a.is-checked, .setting-content .content-body .main-body ul li .invite-people li .bg-white a.is-checked, .setting-content .content-body .main-body ul li .layout li .bg-white a.is-checked { background: #fff; } .setting-content .content-body .main-body ul li input[type=radio] { margin: 4px; } .option { -webkit-border-radius: 3px; border-radius: 3px; background: #fff; text-decoration: none; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.2); margin-top: 5px; padding: 5px; } .title { font-weight: 700; margin-bottom: 0.5rem; } .description { margin-bottom: 0.5rem; } .bg-white { background: #f9fbfc; } .wekan-form-control.has-error { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); } li.has-error { color: #a94442; } li.has-error .form-group .wekan-form-control { border-color: #a94442; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); }