diff --git a/frontend/src/app/sessions/sessions.component.html b/frontend/src/app/sessions/sessions.component.html index fbe63fc1e..7460f08f8 100644 --- a/frontend/src/app/sessions/sessions.component.html +++ b/frontend/src/app/sessions/sessions.component.html @@ -8,12 +8,9 @@ <div class="mt-2"> <app-user-sessions-wrapper> <div class="flex flex-wrap justify-around gap-4"> - <app-create-persistent-session - class="w-[360px] sm:w-[450px]" - ></app-create-persistent-session> - <app-active-sessions - class="mt-[10px] w-[360px] sm:mt-0 sm:w-[450px]" - ></app-active-sessions> + <app-create-persistent-session class="w-full sm:w-[450px]"> + </app-create-persistent-session> + <app-active-sessions class="w-full sm:w-[450px]"></app-active-sessions> </div> </app-user-sessions-wrapper> </div> diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html index 58f2d0448..db9146461 100644 --- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html +++ b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.component.html @@ -13,6 +13,8 @@ <h1 class="text-2xl">Active Sessions</h1> height: '240px', width: '432px', border: '1px solid white', + margin: 0, + 'max-width': '100%', }" ></ngx-skeleton-loader> } @else if ((sessions | async)?.length === 0) { @@ -24,7 +26,7 @@ <h2 class="mb-3 text-xl font-medium">No active sessions</h2> </div> } @else if ((sessions | async)?.length !== 0) { <div class="flex flex-col gap-2"> - <div class="rounded border bg-white p-2"> + <div class="w-full rounded border bg-white p-2"> <h2><b>Internal Session Viewer</b></h2> <mat-radio-group [(ngModel)]="selectedWindowManager"> <mat-radio-button value="tiling" @@ -36,7 +38,7 @@ <h2><b>Internal Session Viewer</b></h2> </mat-radio-group> <a - class="w-full max-w-[85vw]" + class="w-full" matInput mat-stroked-button color="primary" @@ -48,7 +50,10 @@ <h2><b>Internal Session Viewer</b></h2> }" [disabled]="!(selectedSessionIDs$ | async)?.length" > - <span> Open selected sessions in internal session viewer </span> + <div> + Open selected sessions + <span class="hidden sm:inline">in internal session viewer</span> + </div> <mat-icon iconPositionEnd>keyboard_arrow_right</mat-icon> </a> </div> diff --git a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.stories.ts b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.stories.ts index a439f3ba8..15766968b 100644 --- a/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.stories.ts +++ b/frontend/src/app/sessions/user-sessions-wrapper/active-sessions/active-sessions.stories.ts @@ -51,7 +51,7 @@ const meta: Meta<ActiveSessionsComponent> = { providers: [mockOwnUserWrapperServiceProvider(mockUser)], }), componentWrapperDecorator( - (story) => `<div class="w-[360px] sm:w-[450px]">${story}</div>`, + (story) => `<div class="w-full sm:w-[450px]">${story}</div>`, ), ], };