sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-04-09 11:55:53 +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() {
return html`
<div
class="card cursor-pointer overflow-hidden ${this.killing ? 'opacity-60' : ''} ${this
.isActive && this.session.status === 'running'
class="card cursor-pointer overflow-hidden flex flex-col h-full ${this.killing
? 'opacity-60'
: ''} ${this.isActive && this.session.status === 'running'
? 'shadow-[0_0_0_2px_#00ff88] shadow-glow-green-sm'
: ''}"
style="view-transition-name: session-${this.session.id}"
@ -292,10 +293,10 @@ export class SessionCard extends LitElement {
<!-- Terminal display (main content) -->
<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'
: ''}"
style="aspect-ratio: 640/480;"
>
${this.killing
? 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;
}
/* Responsive session flex layout */
/* Responsive session grid layout */
.session-flex-responsive {
display: flex;
flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-auto-rows: 380px;
gap: 1rem;
padding: 0 0.5rem;
justify-content: flex-start;
}
.session-flex-responsive > * {
flex: 1 1 auto;
min-width: 300px;
max-width: 500px;
height: 100%;
overflow: hidden;
}
@media (max-width: 420px) {
.session-flex-responsive {
padding: 0 0.25rem;
}
.session-flex-responsive > * {
min-width: 100%;
max-width: 100%;
grid-template-columns: 1fr;
grid-auto-rows: 300px;
}
}
}