pigui/task-stream
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): ticket types fit their settings panel

Browse Source 
A type row needed some 41rem in a panel of about 26rem, so names were
cut short and the selects spilled out. It takes two lines now (three
on a phone), and on a phone an area keeps «Archivar» beside its name.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Josep Piguillem
2026-10-15 20:55:22 +02:00
parent 2add1b6a31
commit 2cbe6af878
1 changed files with 54 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
libs/web/tracker/presenters/src/lib/pages/settings.page.ts
View File

@@ -1053,11 +1053,35 @@ function idFrom(name: string): string {
color: var(--ts-ink) !important; color: var(--ts-ink) !important;
} }
} }
/* Two lines, to fit a panel of the pair: name and archive on top;
icon, color and template below. */
.ts-type-grid { .ts-type-grid {
display: grid; display: grid;
grid-template-columns: 2rem minmax(8rem, 1fr) 7rem 7rem auto 6.5rem; grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr) 6.5rem;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
> .ts-type-icon {
grid-area: 1 / 1;
}
> .ts-name {
grid-area: 1 / 2 / 2 / 4;
}
> .ts-archive,
> .ts-icon-button {
grid-area: 1 / 4;
}
> select:nth-of-type(1) {
grid-area: 2 / 2;
}
> select:nth-of-type(2) {
grid-area: 2 / 3;
}
> .ts-template-toggle {
grid-area: 2 / 4;
}
> .ts-template {
grid-row: 3;
}
} }
.ts-area-grid { .ts-area-grid {
display: grid; display: grid;
@@ -1291,17 +1315,41 @@ function idFrom(name: string): string {
.ts-rows-head { .ts-rows-head {
display: none; display: none;
} }
.ts-status-grid, .ts-status-grid {
.ts-type-grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.ts-grip, .ts-grip {
.ts-type-icon {
display: none; display: none;
} }
.ts-name { .ts-status-grid > .ts-name {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
/* Name; icon and color; template and archive. */
.ts-type-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
> .ts-type-icon {
display: none;
}
> .ts-name {
grid-area: 1 / 1 / 2 / 3;
}
> select:nth-of-type(1) {
grid-area: 2 / 1;
}
> select:nth-of-type(2) {
grid-area: 2 / 2;
}
> .ts-template-toggle {
grid-area: 3 / 1;
}
> .ts-archive,
> .ts-icon-button {
grid-area: 3 / 2;
}
> .ts-template {
grid-row: 4;
}
}
.ts-savebar { .ts-savebar {
flex-wrap: wrap; flex-wrap: wrap;
border-radius: var(--ts-radius); border-radius: var(--ts-radius);