@use '../../../styles/breakpoints' as *; .bar { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: nowrap; min-width: 0; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 100%; z-index: 100; padding: 10px max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); background: var(--background-light, #fff); border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08)); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); overflow-x: hidden; } .barLeading { display: flex; align-items: center; justify-content: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; /* O flex item do botão de filtros é o wrapper `Badge`, não o `.filterButton`: sem shrink aqui o ellipsis do rótulo nunca engata e a linha invade o slot do botão «Novo» (a 320px sobrepunha «Opções» em 37px). */ > :global(.ant-badge) { display: flex; flex: 1 1 auto; min-width: 0; } } .trailingSlot { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; min-width: 0; margin-left: auto; :global(.ant-btn-primary) { min-width: 44px; min-height: 44px; padding-inline: 12px; } :global(.ant-btn-icon-only.ant-btn-primary) { width: 44px; padding-inline: 0; } } /* Label do Filtrar não empurra ícone/atualizar fora da tela em 320px */ .filterButton { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; :global(> span:not(.ant-btn-icon)) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } @media (max-width: $bp-mobile) { min-height: 44px; } } .iconButton { flex-shrink: 0; @media (max-width: $bp-mobile) { min-width: 44px; min-height: 44px; } } .opcoesButton { flex-shrink: 0; @media (max-width: $bp-mobile) { min-height: 44px; } } .opcoesBody { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .barEqualWidth { justify-content: stretch; } .barEqualRow { display: flex; align-items: center; justify-content: stretch; gap: 8px; flex: 1 1 auto; width: 100%; min-width: 0; } .equalWidthSlot { display: flex; flex: 1 1 0; min-width: 0; :global(.ant-badge) { display: flex; flex: 1 1 0; min-width: 0; width: 100%; } :global(.ant-btn), :global(.ant-btn-icon-only) { width: 100%; } } .equalWidthButton { flex: 1 1 0; width: 100%; min-width: 0; min-height: 44px; } @include max-mobile { .bar { padding: 8px max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)); gap: 6px; } } @include max-small-mobile { .bar { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); } /* Padding lateral menor devolve 16px ao rótulo: a 360px «Filtrar» truncava por 3px. Precisa de `.bar` + `.ant-btn` para ganhar aos estilos runtime do antd (20px), que entram no `` depois do CSS module e empatam em especificidade. */ .bar .filterButton:global(.ant-btn) { padding-inline: 12px; } } /* Abaixo de ~340px o rótulo «Filtrar» já não coexiste com Atualizar + Opções + Novo (precisa de 269px numa linha de 250px): esconder o texto e ficar só com o ícone, em vez de o encolher até sobrar apenas o ellipsis. O `aria-label` mantém o nome. */ @media (max-width: 340px) { .filterButton { flex: 0 0 auto; min-width: 44px; padding-inline: 0; :global(> span:not(.ant-btn-icon)) { display: none; } } }