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

use flex-grid for terminals

Browse source
This commit is contained in:
Peter Steinberger 2025-06-23 03:22:01 +02:00
parent 8c07b60940
commit fce126cf5d
2 changed files with 51 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/client/components/session-list.ts
View file

@ -219,7 +219,7 @@ export class SessionList extends LitElement {
</div>
`
: html`
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="session-flex-responsive">
${repeat(
filteredSessions,
(session) => session.id,

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

@ -104,6 +104,32 @@
.form-label {
@apply text-dark-text-muted text-sm font-medium mb-2 flex items-center gap-2;
}
/* Responsive session flex layout */
.session-flex-responsive {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 0 0.5rem;
justify-content: flex-start;
}
.session-flex-responsive > * {
flex: 1 1 auto;
min-width: 300px;
max-width: 500px;
}
@media (max-width: 420px) {
.session-flex-responsive {
padding: 0 0.25rem;
}
.session-flex-responsive > * {
min-width: 100%;
max-width: 100%;
}
}
}
/* Fira Code Variable Font */
@ -767,25 +793,31 @@ body {
/* View Transitions for Create Session */
::view-transition-old(create-session-button),
::view-transition-new(create-session-button) {
animation-duration: 0.15s;
animation-duration: 0.25s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
::view-transition-old(create-session-modal),
::view-transition-new(create-session-modal) {
animation-duration: 0.15s;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/* Handled by individual animations below */
mix-blend-mode: normal;
z-index: 1000;
}
/* Custom morph animation from button to modal */
/* Custom morph animation from button to modal with spring effect */
@keyframes expand-from-button {
from {
0% {
transform: scale(0)
translate(calc(var(--vt-button-x) - 50vw), calc(var(--vt-button-y) - 50vh));
opacity: 0;
border-radius: 0.5rem;
}
to {
85% {
transform: scale(1.03) translate(0, 0);
opacity: 1;
border-radius: 0.75rem;
}
100% {
transform: scale(1) translate(0, 0);
opacity: 1;
border-radius: 0.75rem;
@ -793,24 +825,26 @@ body {
}
@keyframes shrink-to-button {
from {
0% {
transform: scale(1) translate(0, 0);
opacity: 1;
border-radius: 0.75rem;
}
to {
100% {
transform: scale(0)
translate(calc(var(--vt-button-x) - 50vw), calc(var(--vt-button-y) - 50vh));
opacity: 0;
border-radius: 0.5rem;
}
}
/* Apply the custom animations */
::view-transition-new(create-session-modal) {
animation: expand-from-button 0.15s cubic-bezier(0.4, 0, 0.2, 1);
animation: expand-from-button 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
::view-transition-old(create-session-modal) {
animation: shrink-to-button 0.15s cubic-bezier(0.4, 0, 0.2, 1);
animation: shrink-to-button 0.25s cubic-bezier(0.4, 0, 0.6, 1);
}
/* Hide button during forward transition */
@ -830,7 +864,12 @@ body {
/* Ensure smooth backdrop fade */
.modal-backdrop {
animation: fade-in 0.15s ease-out;
animation: fade-in 0.3s ease-out;
}
/* During close transition, fade backdrop out faster */
::view-transition-old(create-session-modal) ~ .modal-backdrop {
animation: fade-out 0.25s ease-out;
}
@keyframes fade-in {