Skip to content

Commit 09ff868

Browse files
awsldevawsldev
committed
fix(config): support provider cards on touch devices
1 parent e134928 commit 09ff868

3 files changed

Lines changed: 48 additions & 9 deletions

File tree

‎tests/unit/config-tabs-ui.test.mjs‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -619,9 +619,12 @@ test('trash item styles stay aligned', () => {
619619
assert.match(styles, /\.codex-config-grid\s*\{[\s\S]*grid-template-columns:\s*repeat\(auto-fit,\s*minmax\(min\(240px,\s*100%\),\s*1fr\)\);/);
620620
assert.match(styles, /\.codex-config-field\s*\{/);
621621
assert.match(styles, /\.codex-config-field\s*\{[\s\S]*min-width:\s*0;/);
622-
assert.match(styles, /#panel-config-provider \.card-list > \.card,\s*#panel-config-claude \.card-list > \.card\s*\{[\s\S]*padding-top:\s*17px;[\s\S]*padding-bottom:\s*17px;/);
623-
assert.match(styles, /@media \(max-width: 540px\)\s*\{[\s\S]*#panel-config-provider \.card-list > \.card,\s*#panel-config-claude \.card-list > \.card\s*\{[\s\S]*padding-top:\s*13px;[\s\S]*padding-bottom:\s*13px;/);
624-
assert.match(styles, /#panel-config-provider \.card-list > \.card \.card-title,\s*#panel-config-provider \.card-list > \.card \.card-title > span:first-child,\s*#panel-config-claude \.card-list > \.card \.card-title,\s*#panel-config-claude \.card-list > \.card \.card-title > span:first-child\s*\{[\s\S]*white-space:\s*normal;[\s\S]*overflow-wrap:\s*anywhere;/);
622+
assert.match(styles, /#panel-config-provider \.card-list > \.card,\s*#panel-config-claude \.card-list > \.card\s*\{[\s\S]*min-height:\s*88px;[\s\S]*padding-top:\s*22px;[\s\S]*padding-bottom:\s*22px;/);
623+
assert.match(styles, /@media \(max-width: 540px\)\s*\{[\s\S]*#panel-config-provider \.card-list > \.card,\s*#panel-config-claude \.card-list > \.card\s*\{[\s\S]*min-height:\s*84px;[\s\S]*padding-top:\s*18px;[\s\S]*padding-bottom:\s*18px;/);
624+
assert.match(styles, /@media \(hover: none\) and \(pointer: coarse\)\s*\{[\s\S]*#panel-config-provider \.card-list,\s*#panel-config-claude \.card-list\s*\{[\s\S]*grid-template-columns:\s*1fr;/);
625+
assert.match(styles, /@media \(hover: none\) and \(pointer: coarse\)\s*\{[\s\S]*#panel-config-provider \.card-list > \.card,\s*#panel-config-claude \.card-list > \.card\s*\{[\s\S]*min-height:\s*96px;[\s\S]*padding-top:\s*24px;[\s\S]*padding-bottom:\s*24px;/);
626+
assert.match(styles, /#panel-config-provider \.card-list > \.card \.card-title,\s*#panel-config-claude \.card-list > \.card \.card-title\s*\{[\s\S]*flex-wrap:\s*wrap;[\s\S]*white-space:\s*normal;[\s\S]*overflow-wrap:\s*anywhere;/);
627+
assert.match(styles, /#panel-config-provider \.card-list > \.card \.card-title > span:first-child,\s*#panel-config-claude \.card-list > \.card \.card-title > span:first-child\s*\{[\s\S]*white-space:\s*normal;[\s\S]*overflow-wrap:\s*anywhere;/);
625628
});
626629

627630
test('settings tab header actions keep compact tool buttons inline on wider screens', () => {

‎web-ui/styles/responsive.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -433,8 +433,9 @@ textarea:focus-visible {
433433

434434
#panel-config-provider .card-list > .card,
435435
#panel-config-claude .card-list > .card {
436-
padding-top: 13px;
437-
padding-bottom: 13px;
436+
min-height: 84px;
437+
padding-top: 18px;
438+
padding-bottom: 18px;
438439
}
439440

440441
.card-list {

‎web-ui/styles/titles-cards.css‎

Lines changed: 39 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -114,19 +114,54 @@
114114

115115
#panel-config-provider .card-list > .card,
116116
#panel-config-claude .card-list > .card {
117-
padding-top: 17px;
118-
padding-bottom: 17px;
117+
align-items: flex-start;
118+
min-height: 88px;
119+
padding-top: 22px;
120+
padding-bottom: 22px;
121+
}
122+
123+
#panel-config-provider .card-list > .card .card-leading,
124+
#panel-config-claude .card-list > .card .card-leading {
125+
align-items: flex-start;
126+
}
127+
128+
#panel-config-provider .card-list > .card .card-content,
129+
#panel-config-claude .card-list > .card .card-content {
130+
gap: 4px;
119131
}
120132

121133
#panel-config-provider .card-list > .card .card-title,
134+
#panel-config-claude .card-list > .card .card-title {
135+
align-items: flex-start;
136+
flex-wrap: wrap;
137+
white-space: normal;
138+
overflow: visible;
139+
text-overflow: clip;
140+
overflow-wrap: anywhere;
141+
line-height: 1.3;
142+
}
143+
122144
#panel-config-provider .card-list > .card .card-title > span:first-child,
123-
#panel-config-claude .card-list > .card .card-title,
124145
#panel-config-claude .card-list > .card .card-title > span:first-child {
125146
white-space: normal;
126147
overflow: visible;
127148
text-overflow: clip;
128149
overflow-wrap: anywhere;
129-
line-height: 1.25;
150+
line-height: 1.3;
151+
}
152+
153+
@media (hover: none) and (pointer: coarse) {
154+
#panel-config-provider .card-list,
155+
#panel-config-claude .card-list {
156+
grid-template-columns: 1fr;
157+
}
158+
159+
#panel-config-provider .card-list > .card,
160+
#panel-config-claude .card-list > .card {
161+
min-height: 96px;
162+
padding-top: 24px;
163+
padding-bottom: 24px;
164+
}
130165
}
131166

132167
.card:hover {

0 commit comments

Comments
 (0)