Use header in layout

This commit is contained in:
Nicolas Mowen 2024-04-05 11:48:53 -06:00
parent 15b38d8e8d
commit 5391976b4b

View File

@ -381,11 +381,8 @@ function Logs() {
</Button> </Button>
)} )}
<div <div className="size-full flex flex-col my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap bg-primary border border-secondary rounded-md overflow-hidden">
ref={contentRef} <div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:px-2 *:py-3 *:text-sm *:text-primary-foreground/40">
className="w-full h-min my-2 font-mono text-sm sm:p-2 whitespace-pre-wrap overflow-auto no-scrollbar bg-primary border border-secondary rounded-md"
>
<div className="grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 *:p-2 *:text-sm *:text-primary-foreground/40">
<div className="p-1 flex items-center capitalize">Type</div> <div className="p-1 flex items-center capitalize">Type</div>
<div className="col-span-2 sm:col-span-1 flex items-center"> <div className="col-span-2 sm:col-span-1 flex items-center">
Timestamp Timestamp
@ -395,6 +392,10 @@ function Logs() {
Message Message
</div> </div>
</div> </div>
<div
ref={contentRef}
className="w-full flex flex-col overflow-y-auto no-scrollbar"
>
{logLines.length > 0 && {logLines.length > 0 &&
[...Array(logRange.end).keys()].map((idx) => { [...Array(logRange.end).keys()].map((idx) => {
const logLine = const logLine =
@ -436,6 +437,7 @@ function Logs() {
{logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />} {logLines.length > 0 && <div id="page-bottom" ref={endLogRef} />}
</div> </div>
</div> </div>
</div>
); );
} }
@ -456,7 +458,7 @@ function LogLineData({
return ( return (
<div <div
ref={startRef} ref={startRef}
className={`py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`} className={`w-full py-2 grid grid-cols-5 sm:grid-cols-8 md:grid-cols-12 gap-2 border-secondary border-t cursor-pointer hover:bg-muted ${className} *:text-sm`}
onClick={onSelect} onClick={onSelect}
> >
<div className="h-full p-1 flex items-center gap-2"> <div className="h-full p-1 flex items-center gap-2">
@ -470,7 +472,7 @@ function LogLineData({
{line.section} {line.section}
</div> </div>
</div> </div>
<div className="size-full pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center"> <div className="size-full pl-2 sm:pl-0 pr-2 col-span-5 sm:col-span-4 md:col-span-8 flex justify-between items-center">
<div className="w-full overflow-hidden whitespace-nowrap text-ellipsis"> <div className="w-full overflow-hidden whitespace-nowrap text-ellipsis">
{line.content} {line.content}
</div> </div>