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

Improve sidebar background color and mobile dialog spacing

Browse source 
- Change sidebar background from near-black to dark gray (dark-bg-secondary)
- Extend dark gray background to session list container for consistent appearance
- Reduce session create dialog margins on mobile from mx-4 to mx-2
- Reduce dialog padding on mobile from p-4 to p-3
- Maintain larger spacing on tablets/desktop with responsive classes

These changes create a more cohesive dark gray sidebar and better utilize
screen space on mobile devices for the session creation dialog.
This commit is contained in:
Peter Steinberger 2025-06-24 04:35:59 +02:00
parent 763d9ce8f0
commit 5535448d9c
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/client/app.ts
View file

@ -821,7 +821,7 @@ export class VibeTunnelApp extends LitElement {
return 'w-full min-h-screen flex flex-col';
}
const baseClasses = 'bg-dark-bg border-r border-dark-border flex flex-col';
const baseClasses = 'bg-dark-bg-secondary border-r border-dark-border flex flex-col';
const isMobile = this.mediaState.isMobile;
const mobileClasses = isMobile
? 'absolute left-0 top-0 bottom-0 z-30 flex'
@ -970,7 +970,7 @@ export class VibeTunnelApp extends LitElement {
@open-notification-settings=${this.handleShowNotificationSettings}
@logout=${this.handleLogout}
></app-header>
<div class="${this.showSplitView ? 'flex-1 overflow-y-auto' : 'flex-1'} bg-dark-bg">
<div class="${this.showSplitView ? 'flex-1 overflow-y-auto' : 'flex-1'} bg-dark-bg-secondary">
<session-list
.sessions=${this.sessions}
.loading=${this.loading}

4
web/src/client/components/session-create-form.ts
View file

@ -314,7 +314,7 @@ export class SessionCreateForm extends LitElement {
return html`
<div class="modal-backdrop flex items-center justify-center">
<div
class="modal-content font-mono text-sm w-96 lg:w-[576px] max-w-full mx-4"
class="modal-content font-mono text-sm w-96 lg:w-[576px] max-w-full mx-2 sm:mx-4"
style="view-transition-name: create-session-modal"
>
<div class="pb-6 mb-6 border-b border-dark-border relative">
@ -342,7 +342,7 @@ export class SessionCreateForm extends LitElement {
</button>
</div>
<div class="p-4 lg:p-8">
<div class="p-3 sm:p-4 lg:p-8">
<!-- Session Name -->
<div class="mb-6">
<label class="form-label">Session Name (Optional):</label>