mobile ux

This commit is contained in:
Mateusz Gruszczyński
2026-05-08 19:00:26 +02:00
parent 80cea1dbc3
commit f245f082d5
5 changed files with 354 additions and 34 deletions

View File

@@ -223,8 +223,9 @@ body {
display: grid;
grid-template-columns: var(--sidebar) 1fr;
}
/* Note: Sidebar filters are denser so large tracker lists fit better on one screen. */
.sidebar {
padding: 0.65rem;
padding: 0.5rem;
overflow: auto;
background: rgba(var(--bs-secondary-bg-rgb), 0.9);
}
@@ -232,10 +233,10 @@ body {
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.15rem 0.55rem;
gap: 0.1rem 0.45rem;
align-items: center;
margin-bottom: 0.2rem;
padding: 0.45rem 0.6rem;
margin-bottom: 0.12rem;
padding: 0.34rem 0.5rem;
border: 0;
border-radius: 0.55rem;
background: transparent;
@@ -863,9 +864,9 @@ body.mobile-mode .main-grid {
}
.label-filters .label-filter,
.tracker-filters .tracker-filter {
font-size: 0.82rem;
padding: 0.34rem 0.5rem;
margin-bottom: 0.15rem;
font-size: 0.78rem;
margin-bottom: 0.08rem;
padding: 0.26rem 0.44rem;
}
.label-filters .label-filter i,
.tracker-filters .tracker-filter i {
@@ -883,9 +884,9 @@ body.mobile-mode .main-grid {
.tracker-favicon {
border-radius: 0.2rem;
flex: 0 0 auto;
height: 16px;
height: 14px;
object-fit: contain;
width: 16px;
width: 14px;
}
.tracker-favicon:not(.d-none) + .tracker-fallback-icon {
@@ -896,9 +897,9 @@ body.mobile-mode .main-grid {
align-items: center;
color: var(--bs-secondary-color);
display: flex;
font-size: 0.78rem;
gap: 0.35rem;
padding: 0.25rem 0.5rem;
font-size: 0.76rem;
gap: 0.3rem;
padding: 0.2rem 0.44rem;
}
/* Note: Empty tracker state uses the same sidebar spacing as regular filter rows. */