danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust header layout and widen guest name column

Browse source
This commit is contained in:
rcourtman 2025-10-27 20:55:28 +00:00
parent a3cd7ba7b8
commit 7733d4b870
4 changed files with 7 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend-modern/src/App.tsx
View file

@ -940,8 +940,8 @@ function AppLayout(props: {
return (
<div class="pulse-shell">
{/* Header */}
<div class="header mb-3 flex flex-wrap items-center gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:items-center sm:gap-0">
<div class="flex flex-1 items-center gap-2 sm:flex-initial sm:gap-2 sm:col-start-2 sm:col-end-3 sm:justify-self-center">
<div class="header mb-3 flex items-center justify-between gap-2 sm:grid sm:grid-cols-[1fr_auto_1fr] sm:items-center sm:gap-0">
<div class="flex items-center gap-2 sm:flex-initial sm:gap-2 sm:col-start-2 sm:col-end-3 sm:justify-self-center">
<div class="flex items-center gap-2">
<svg
width="20"
@ -978,7 +978,7 @@ function AppLayout(props: {
</Show>
</div>
</div>
<div class="header-controls flex w-full flex-wrap items-center gap-2 justify-end sm:col-start-3 sm:col-end-4 sm:w-auto sm:justify-end sm:justify-self-end">
<div class="header-controls flex items-center gap-2 justify-end sm:col-start-3 sm:col-end-4 sm:w-auto sm:justify-end sm:justify-self-end">
<Show when={props.hasAuth() && !props.needsAuth()}>
<div class="flex items-center gap-2">
<Show when={props.proxyAuthInfo()?.username}>

2
frontend-modern/src/components/Dashboard/Dashboard.tsx
View file

@ -910,7 +910,7 @@ export function Dashboard(props: DashboardProps) {
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
<th
class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[130px] sm:w-[150px] lg:w-[180px] xl:w-[200px] 2xl:w-[240px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
class="pl-4 pr-2 py-1 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500"
onClick={() => handleSort('name')}
onKeyDown={(e) => e.key === 'Enter' && handleSort('name')}
tabindex="0"

2
frontend-modern/src/components/Dashboard/GuestRow.tsx
View file

@ -409,7 +409,7 @@ export function GuestRow(props: GuestRowProps) {
// Get first cell styling
const firstCellClass = createMemo(() => {
const base =
'py-0.5 pr-2 whitespace-nowrap relative w-[130px] sm:w-[150px] lg:w-[180px] xl:w-[200px] 2xl:w-[240px]';
'py-0.5 pr-2 whitespace-nowrap relative w-[160px] sm:w-[200px] lg:w-[240px] xl:w-[280px] 2xl:w-[340px]';
const indent = 'pl-4';
return `${base} ${indent}`;
});

5
frontend-modern/src/index.css
View file

@ -355,10 +355,9 @@ body,
white-space: nowrap;
}
/* Keep name column slightly flexible while maintaining stability */
/* Keep name column single line to avoid wrapping while giving it more space */
.table-fixed td:first-child {
white-space: normal;
word-break: break-word;
white-space: nowrap;
}
/* Hide scrollbars but keep functionality */