k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-19 13:36:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(collab): link chips two to a row across the panel

Browse Source 
A chip takes half the panel now, one to a row where the panel is narrower
than a container query's 420px; the title and the host give way inside it
instead of capping their width.
This commit is contained in:
Maurice
2026-09-20 20:04:39 +02:00
parent 97a2ea1748
commit 67dff455da
2 changed files with 31 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Collab/CollabLinks.tsx
+4 -4
View File
@@ -219,13 +219,13 @@ export default function CollabLinks({ tripId }: { tripId: number }) {
)}
</div>
{/* Content: one chip per link, flowing like tags (see .collab-link-chip). The chip
is the link, with the host beside the title; the actions unfold from its tail. */}
<div className="chat-scroll" style={{ flex: 1, overflowY: 'auto', padding: '2px 12px 12px' }}>
{/* Content: one chip per link, two to a row (see .collab-link-chip). The chip is
the link, with the host beside the title; the actions sit in its tail. */}
<div className="chat-scroll collab-link-grid" style={{ flex: 1, overflowY: 'auto', padding: '2px 12px 12px' }}>
{links.length === 0 ? (
<EmptyState scene="links" title={t('collab.links.empty')} />
) : (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'flex-start' }}>
<div className="collab-link-grid__cells">
{links.map(link => (
<div key={link.id} className={link.pinned ? 'collab-link-chip collab-link-chip--pinned' : 'collab-link-chip'}>
<a className="collab-link-chip__main" href={link.url} target="_blank" rel="noreferrer" title={t('collab.links.open')}>
client/src/index.css
+27 -11
View File
@@ -1375,16 +1375,27 @@ img[alt="TREK"] {
justify-content: center;
}
/* Shared links in the Collab tab: one chip per link, flowing like tags. The chip is
the link; edit, pin and delete sit quietly in its tail and come forward on hover
or keyboard focus. They keep their width throughout: unfolding them reflowed the
row under the pointer, and a chip that grows as you reach for it is a chip you
cannot catch. */
/* Shared links in the Collab tab: one chip per link, two to a row across the full
width, one to a row where the panel is narrow. The chip is the link; edit, pin and
delete sit quietly in its tail and come forward on hover or keyboard focus. They
keep their width throughout: unfolding them reflowed the row under the pointer,
and a chip that grows as you reach for it is a chip you cannot catch. */
.collab-link-grid {
container-type: inline-size;
}
.collab-link-grid__cells {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
@container (max-width: 420px) {
.collab-link-grid__cells { grid-template-columns: minmax(0, 1fr); }
}
.collab-link-chip {
display: inline-flex;
display: flex;
align-items: center;
gap: 6px;
max-width: 100%;
min-width: 0;
padding: 5px 8px 5px 5px;
border-radius: 999px;
background: var(--bg-secondary);
@@ -1405,6 +1416,7 @@ img[alt="TREK"] {
display: flex;
align-items: center;
gap: 7px;
flex: 1 1 auto;
min-width: 0;
color: var(--text-primary);
text-decoration: none;
@@ -1423,7 +1435,7 @@ img[alt="TREK"] {
color: var(--text-faint);
}
.collab-link-chip__icon img { width: 16px; height: 16px; object-fit: contain; }
.collab-link-chip__text { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.collab-link-chip__text { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; }
.collab-link-chip__title {
font-size: calc(12.5px * var(--fs-scale-body, 1));
font-weight: 600;
@@ -1431,7 +1443,8 @@ img[alt="TREK"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
flex: 0 1 auto;
min-width: 0;
}
.collab-link-chip__host {
font-size: calc(10.5px * var(--fs-scale-caption, 1));
@@ -1439,7 +1452,9 @@ img[alt="TREK"] {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
flex: 0 1 auto;
min-width: 0;
max-width: 45%;
}
.collab-link-chip__open {
flex: 0 0 auto;
@@ -1452,8 +1467,9 @@ img[alt="TREK"] {
.collab-link-chip__actions {
display: flex;
align-items: center;
flex: 0 0 auto;
gap: 1px;
margin-left: 2px;
margin-left: auto;
opacity: 0.45;
transition: opacity 0.15s ease;
}