k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-22 23:16:46 +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')}>