Fix mobile overflow and touch targets
CI / checks (push) Successful in 6m41s

This commit is contained in:
2026-10-16 17:48:06 -04:00
parent 4e04191330
commit b5037a70fe
5 changed files with 43 additions and 1 deletions
@@ -104,6 +104,13 @@
padding: var(--space-6); padding: var(--space-6);
border-bottom: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle);
} }
header > div {
min-width: 0;
overflow-wrap: anywhere;
}
header > :global(.btn) {
flex-shrink: 0;
}
h2 { h2 {
margin: 0; margin: 0;
font-size: var(--text-xl); font-size: var(--text-xl);
+6 -1
View File
@@ -738,8 +738,13 @@
min-height: 44px; min-height: 44px;
} }
:global(button), :global(button),
:global(summary),
:global(.btn) { :global(.btn) {
min-height: 44px; /* Keep scoped component size rules from shrinking mobile touch targets. */
min-height: 44px !important;
}
:global(.btn) {
min-width: 44px !important;
} }
} }
@media (max-width: 360px) { @media (max-width: 360px) {
+5
View File
@@ -214,6 +214,7 @@
.page { .page {
max-width: 760px; max-width: 760px;
display: grid; display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px; gap: 24px;
} }
.panel { .panel {
@@ -232,6 +233,10 @@
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 20px;
} }
.identity > div {
min-width: 0;
overflow-wrap: anywhere;
}
.identity p { .identity p {
margin: 8px 0 0; margin: 8px 0 0;
color: var(--text-secondary); color: var(--text-secondary);
+13
View File
@@ -752,4 +752,17 @@
background: var(--surface-sunken); background: var(--surface-sunken);
font-size: var(--text-xs); font-size: var(--text-xs);
} }
@media (max-width: 640px) {
.host-menu {
min-width: 0;
width: 100%;
}
.host-menu summary {
min-height: 44px;
}
.host-menu > div {
position: static;
min-width: 0;
}
}
</style> </style>
+12
View File
@@ -1158,6 +1158,18 @@
clip-path: inset(50%); clip-path: inset(50%);
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.server-actions {
min-width: 0;
width: 100%;
text-align: left;
}
.server-actions summary {
min-height: 44px;
}
.action-menu {
position: static;
min-width: 0;
}
.panel-head, .panel-head,
.alert { .alert {
flex-wrap: wrap; flex-wrap: wrap;