sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-27 15:17:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make grid fixed size

Browse source
This commit is contained in:
Peter Steinberger 2025-06-24 00:06:56 +02:00
parent ab3acca054
commit a51ecb174f
2 changed files with 13 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
web/src/client/components/session-card.ts
View file

@ -235,8 +235,9 @@ export class SessionCard extends LitElement {
render() { render() {
return html` return html`
<div <div
class="card cursor-pointer overflow-hidden ${this.killing ? 'opacity-60' : ''} ${this class="card cursor-pointer overflow-hidden flex flex-col h-full ${this.killing
.isActive && this.session.status === 'running' ? 'opacity-60'
: ''} ${this.isActive && this.session.status === 'running'
? 'shadow-[0_0_0_2px_#00ff88] shadow-glow-green-sm' ? 'shadow-[0_0_0_2px_#00ff88] shadow-glow-green-sm'
: ''}" : ''}"
style="view-transition-name: session-${this.session.id}" style="view-transition-name: session-${this.session.id}"
@ -292,10 +293,10 @@ export class SessionCard extends LitElement {
<!-- Terminal display (main content) --> <!-- Terminal display (main content) -->
<div <div
class="session-preview bg-dark-bg overflow-hidden ${this.session.status === 'exited' class="session-preview bg-dark-bg overflow-hidden flex-1 ${this.session.status ===
'exited'
? 'session-exited' ? 'session-exited'
: ''}" : ''}"
style="aspect-ratio: 640/480;"
> >
${this.killing ${this.killing
? html` ? html`

20
web/src/client/styles.css
View file

@ -105,29 +105,25 @@
@apply text-dark-text-muted text-sm font-medium mb-2 flex items-center gap-2; @apply text-dark-text-muted text-sm font-medium mb-2 flex items-center gap-2;
} }
/* Responsive session flex layout */ /* Responsive session grid layout */
.session-flex-responsive { .session-flex-responsive {
display: flex; display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-auto-rows: 380px;
gap: 1rem; gap: 1rem;
padding: 0 0.5rem; padding: 0 0.5rem;
justify-content: flex-start;
} }
.session-flex-responsive > * { .session-flex-responsive > * {
flex: 1 1 auto; height: 100%;
min-width: 300px; overflow: hidden;
max-width: 500px;
} }
@media (max-width: 420px) { @media (max-width: 420px) {
.session-flex-responsive { .session-flex-responsive {
padding: 0 0.25rem; padding: 0 0.25rem;
} grid-template-columns: 1fr;
grid-auto-rows: 300px;
.session-flex-responsive > * {
min-width: 100%;
max-width: 100%;
} }
} }
} }