Fix mobile catalog header alignment

This commit is contained in:
pavlov346346-source 2026-09-08 20:14:03 +03:00
parent f8bb0a78b4
commit b198fb04e9

View File

@ -1,15 +1,43 @@
/* Caterium v17.6.0 mobile stability refinements. */ /* Caterium mobile stability refinements. */
@media (max-width:900px){ @media (max-width:900px){
html,body{max-width:100%;overflow-x:hidden} html,body{max-width:100%;overflow-x:hidden}
.work,.card,.catalog,.sun-catalog-shell,.sun-catalog-main{min-width:0!important;max-width:100%!important} .work,.card,.catalog,.sun-catalog-shell,.sun-catalog-main{min-width:0!important;max-width:100%!important}
.cats{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;overscroll-behavior-x:contain;scrollbar-width:thin}
.cats>button{flex:0 0 auto!important;min-width:132px!important} /* Mobile sidebar: remove the two icon-only controls that can render as empty squares. */
.sun-catalog-view-switch,.sun-catalog-top-toolbar,.sun-settings-tabs{max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;overscroll-behavior-x:contain} .sun-enterprise-sidebar #sunGlobalSearchBtn,
.sun-catalog-view-switch>*{flex:0 0 auto!important} .sun-enterprise-sidebar #sunNotificationsBtn{display:none!important}
/* Catalog header: title, full-width search, then three equal actions. */
#new .catalog .catalog-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:10px!important}
#new .catalog .catalog-head>h1{margin:0!important;min-width:0!important}
#new .catalog .sun-catalog-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;width:100%!important;max-width:100%!important;min-width:0!important;align-items:stretch!important;justify-content:stretch!important;overflow:visible!important}
#new .catalog .sun-catalog-view-switch{display:none!important}
#new .catalog #sunCatalogSearch{grid-column:1/-1!important;order:-20!important;width:100%!important;max-width:none!important;min-width:0!important;height:42px!important;margin:0!important;padding:8px 12px!important;border-radius:10px!important;box-sizing:border-box!important}
#new .catalog #sunLiveCatalogPdfButton,
#new .catalog #sunCatalogTabsButton,
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton){width:100%!important;max-width:none!important;min-width:0!important;height:42px!important;min-height:42px!important;margin:0!important;padding:0 8px!important;border-radius:10px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;white-space:nowrap!important;line-height:1!important;box-sizing:border-box!important}
#new .catalog #sunLiveCatalogPdfButton{order:1!important}
#new .catalog #sunCatalogTabsButton{order:2!important}
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton){order:3!important;font-size:0!important}
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton)::before{content:'☰';font-size:16px!important;line-height:1!important;font-weight:700!important}
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton)::after{content:'Меню';font-size:13px!important;line-height:1!important;font-weight:700!important}
/* Category tabs stay on one row and scroll horizontally with a finger. */
.cats{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;gap:8px!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none!important;padding-inline:2px!important}
.cats::-webkit-scrollbar{display:none!important}
.cats>button{flex:0 0 auto!important;width:auto!important;min-width:max-content!important;margin:0!important;white-space:nowrap!important}
.sun-catalog-top-toolbar,.sun-settings-tabs{max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;overscroll-behavior-x:contain}
.sun-catalog-top-toolbar>*{flex:0 0 auto!important}
.enterprise-card,.sun-chat-shell,.sun-chat-main,.sun-chat-sidebar{min-width:0!important;max-width:100%!important} .enterprise-card,.sun-chat-shell,.sun-chat-main,.sun-chat-sidebar{min-width:0!important;max-width:100%!important}
} }
@media (max-width:420px){ @media (max-width:430px){
.catalog-head{gap:8px;flex-wrap:wrap} #new .catalog .catalog-head{gap:8px!important}
.catalog-head h1{flex:1 1 auto} #new .catalog .sun-catalog-actions{gap:6px!important}
#new .catalog #sunCatalogSearch{height:40px!important}
#new .catalog #sunLiveCatalogPdfButton,
#new .catalog #sunCatalogTabsButton,
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton){height:40px!important;min-height:40px!important;padding-inline:6px!important;font-size:12px!important}
#new .catalog .sun-catalog-actions>button.outline:not(#sunLiveCatalogPdfButton):not(#sunCatalogTabsButton)::after{font-size:12px!important}
.sun-catalog-top-toolbar{gap:6px!important} .sun-catalog-top-toolbar{gap:6px!important}
} }