Skip to content

fix: improve logview UI #1808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gustavobtflores merged 7 commits into from
Mar 27, 2026
Merged

fix: improve logview UI #1808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
aa6f254
style: set max height and max width for code component
Mar 18, 2026
c7971c5
style: improve WrapperSheetContent component
Mar 18, 2026
004379e
style: wrap elements on log viewer subtitle
Mar 19, 2026
497e936
style: allow log view to cover all space on smallest screen
Mar 19, 2026
78b7bad
style: stack footer buttons vertically below lg break
Mar 25, 2026
68f33fd
style: improve WrapperSheetContent footer responsiveness
Mar 25, 2026
7f55b19
style: remove horizontal margin on certain breakpoints
Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dashboard/src/components/Filter/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,7 @@ const CodeBlock = ({

return (
<>
<div className="min-h-[300px]">
<div className="min-h-[300px] w-full">
<div className="pl-3">
{variant === 'log-viewer' && (
<h3 className="py-1 text-2xl font-bold">
Expand Down
2 changes: 1 addition & 1 deletion dashboard/src/components/Log/LogViewerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const LogViewerCard = ({

return (
<div className="gap-0">
<div className="flex items-start justify-between p-4 text-lg">
<div className="grid grid-cols-1 items-start justify-between p-4 text-lg md:grid-cols-2">
{isLoading ? (
<FormattedMessage id="global.loading" />
) : (
Expand Down
24 changes: 12 additions & 12 deletions dashboard/src/components/Sheet/WrapperSheetContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,21 +95,21 @@ export const WrapperSheetContent = ({

<div
className={cn(
'mt-auto flex',
detailsButton ? 'justify-between' : 'justify-end',
'mt-auto flex flex-col lg:flex-row',
detailsButton ? 'lg:justify-between' : 'lg:justify-end',
)}
>
{detailsButton}
<div className="flex">
<div className="mt-auto flex justify-end">
<div className="flex justify-around">{detailsButton}</div>
<div className="flex flex-wrap justify-evenly lg:justify-end">
<div className="mt-auto grid grid-cols-1 lg:grid-cols-3">
{navigationLogsActions && (
<>
<Tooltip>
<TooltipTrigger asChild>
<Button
onClick={navigationLogsActions.previousItem}
disabled={!navigationLogsActions.hasPrevious}
className="rounded-3xl bg-[#11B3E6] px-14 font-bold text-white"
className="mt-4 mb-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:my-0"
>
<FormattedMessage
id="global.prev"
Expand All @@ -124,7 +124,7 @@ export const WrapperSheetContent = ({
<Button
onClick={navigationLogsActions.nextItem}
disabled={!navigationLogsActions.hasNext}
className="mx-5 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white"
className="mx-0 my-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:mx-5 lg:my-0"
>
<FormattedMessage
id="global.next"
Expand All @@ -136,12 +136,12 @@ export const WrapperSheetContent = ({
</Tooltip>
</>
)}
<SheetTrigger asChild>
<Button className="mt-2 rounded-3xl bg-[#11B3E6] px-14 font-bold text-white lg:mt-0">
<FormattedMessage id="global.close" defaultMessage="Close" />
</Button>
</SheetTrigger>
</div>
<SheetTrigger asChild>
<Button className="rounded-3xl bg-[#11B3E6] px-14 font-bold text-white">
<FormattedMessage id="global.close" defaultMessage="Close" />
</Button>
</SheetTrigger>
</div>
</div>
</SheetContent>
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/ui/sheet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ const sheetVariants = cva(
top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
bottom:
'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
left: 'inset-y-0 left-0 h-full w-full border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
right:
'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right-[100%] data-[state=open]:slide-in-from-right-[100%] sm:max-w-sm',
'inset-y-0 right-0 h-full w-full border-l data-[state=closed]:slide-out-to-right-[100%] data-[state=open]:slide-in-from-right-[100%] sm:max-w-sm',
},
},
defaultVariants: {
Expand Down
Loading