Fix mobile catalog toolbar layout and empty controls

This commit is contained in:
pavlov346346-source 2026-09-09 02:20:00 +03:00
parent f8bb0a78b4
commit 3f6980e5bc

View File

@ -2,14 +2,86 @@
@media (max-width:900px){
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}
.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}
.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:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cats>button{flex:0 0 auto!important;min-width:132px!important;white-space:nowrap!important}
.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-catalog-view-switch>*{flex:0 0 auto!important}
.enterprise-card,.sun-chat-shell,.sun-chat-main,.sun-chat-sidebar{min-width:0!important;max-width:100%!important}
/* Empty mobile header controls must not leave blank square placeholders. */
header button:empty:not([aria-label]):not([title]){display:none!important}
}
@media (max-width:650px){
/* Catalog mobile toolbar: title -> full-width search -> PDF / Tabs / Menu. */
#new .catalog .catalog-head{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
align-items:center!important;
width:100%!important;
}
#new .catalog .catalog-head>h1{
grid-column:1/-1!important;
min-width:0!important;
margin:0 0 2px!important;
}
#new .catalog .catalog-head>.sun-catalog-search,
#new .catalog .catalog-head>#sunCatalogSearch{
grid-column:1/-1!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
height:40px!important;
margin:0!important;
}
#new .catalog .catalog-head>#sunLiveCatalogPdfButton,
#new .catalog .catalog-head>#sunCatalogTabsButton,
#new .catalog .catalog-head>button[onclick*="openManager"]{
width:100%!important;
min-width:0!important;
height:40px!important;
min-height:40px!important;
margin:0!important;
padding:0 8px!important;
border-radius:8px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
line-height:1!important;
white-space:nowrap!important;
}
#new .catalog .catalog-head>#sunLiveCatalogPdfButton{grid-column:1!important}
#new .catalog .catalog-head>#sunCatalogTabsButton{grid-column:2!important}
#new .catalog .catalog-head>button[onclick*="openManager"]{
grid-column:3!important;
font-size:0!important;
}
#new .catalog .catalog-head>button[onclick*="openManager"]::after{
content:'Меню';
font-size:13px!important;
font-weight:700!important;
line-height:1!important;
}
#new .catalog .catalog-head>button[onclick*="openManager"] svg,
#new .catalog .catalog-head>button[onclick*="openManager"] img{
width:16px!important;
height:16px!important;
flex:0 0 16px!important;
}
}
@media (max-width:420px){
.catalog-head{gap:8px;flex-wrap:wrap}
.catalog-head h1{flex:1 1 auto}
.sun-catalog-top-toolbar{gap:6px!important}
#new .catalog .catalog-head{gap:7px!important}
#new .catalog .catalog-head>#sunLiveCatalogPdfButton,
#new .catalog .catalog-head>#sunCatalogTabsButton,
#new .catalog .catalog-head>button[onclick*="openManager"]{
padding-inline:6px!important;
font-size:12px!important;
}
#new .catalog .catalog-head>button[onclick*="openManager"]{font-size:0!important}
#new .catalog .catalog-head>button[onclick*="openManager"]::after{font-size:12px!important}
}