Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

fix: polish assistant mobile layout

Browse Source
This commit is contained in:
ajnart committed 2026-08-13 19:56:17 +02:00
1 parent 4635e3ce4e
commit ea1e07c74f
2 files changed
+98 -21
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/nextjs/src/components/assistant/assistant-panel.module.css
+72 -13
View File
@@ -2,7 +2,7 @@
position: fixed;
z-index: 290;
inset-inline-start: 50%;
bottom: 1rem;
bottom: max(1rem, env(safe-area-inset-bottom));
display: flex;
width: min(31rem, calc(100vw - 1rem));
min-height: 3.5rem;
@@ -39,6 +39,11 @@
color: var(--mantine-color-dimmed);
}
.activityDismiss {
width: 2.5rem;
height: 2.5rem;
}
.floatingPanel {
position: fixed;
z-index: 290;
@@ -68,6 +73,24 @@
border-bottom: 1px solid var(--mantine-color-default-border);
}
.panelIdentity,
.panelIdentityText {
min-width: 0;
}
.panelIdentity {
flex: 1;
}
.panelActions {
flex: 0 0 auto;
}
.panelAction {
width: 2.625rem;
height: 2.625rem;
}
.historyMenu {
background: var(--mantine-color-body);
}
@@ -90,6 +113,7 @@
}
.viewport {
position: relative;
display: flex;
min-height: 0;
flex: 1;
@@ -186,6 +210,11 @@
font: inherit;
}
.composerInput::placeholder {
color: var(--mantine-color-dimmed);
opacity: 1;
}
.empty {
display: flex;
min-height: 23rem;
@@ -212,10 +241,14 @@
}
.scrollToBottom {
position: absolute;
inset-inline-start: 50%;
position: sticky;
bottom: 0.75rem;
transform: translateX(-50%);
z-index: 1;
flex: 0 0 auto;
align-self: center;
margin-top: -2.5rem;
margin-bottom: 0.75rem;
box-shadow: var(--mantine-shadow-sm);
}
@keyframes assistant-activity-in {
@@ -244,18 +277,34 @@
@media (max-width: 48em) {
.activityBar {
bottom: 0.5rem;
bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.floatingPanel {
bottom: 0.5rem;
bottom: max(0.5rem, env(safe-area-inset-bottom));
width: calc(100vw - 1rem);
height: min(44rem, calc(100dvh - 1rem));
min-height: min(20rem, calc(100dvh - 1rem));
height: min(44rem, calc(100dvh - 1rem - env(safe-area-inset-bottom)));
min-height: min(20rem, calc(100dvh - 1rem - env(safe-area-inset-bottom)));
}
.panelHeader {
padding-inline-start: 0.7rem;
min-height: 3.5rem;
padding: 0.5rem;
padding-inline-start: 0.65rem;
}
.composerWrap {
padding: 0.5rem;
}
.composer {
gap: 0.25rem;
padding: 0.25rem 0.3rem;
}
.composerInput {
min-height: 2.625rem;
padding: 0.6rem 0.55rem;
}
.suggestions {
@@ -263,15 +312,17 @@
}
.empty {
min-height: 32rem;
min-height: 26rem;
padding-block: 1.5rem;
}
}
@media (max-width: 30em) {
.historyButton {
max-width: 2.25rem;
padding-inline: 0.5rem;
width: 2.625rem;
max-width: 2.625rem;
height: 2.625rem;
padding-inline: 0.75rem;
}
.historyButtonSection {
@@ -283,7 +334,15 @@
}
.messages {
padding-inline: 0.75rem;
padding: 0.5rem 0.75rem 1rem;
}
.message {
margin-block: 0.7rem;
}
.userMessage {
max-width: 92%;
}
}
apps/nextjs/src/components/assistant/assistant-panel.tsx
+26 -8
View File
@@ -339,6 +339,7 @@ const ConversationHistory = () => {
leftSection={<IconHistory size={16} />}
classNames={{ section: classes.historyButtonSection, label: classes.historyButtonLabel }}
onClick={() => setOpened((current) => !current)}
aria-label={opened ? t("closeHistory") : t("openHistory")}
>
{t("conversations")}
</Button>
@@ -489,7 +490,13 @@ const AssistantActivityBar = ({
</Group>
</UnstyledButton>
{!isRunning && !needsApproval && (
<ActionIcon variant="subtle" color="gray" size="sm" onClick={onMarkRead} aria-label={t("activity.dismiss")}>
<ActionIcon
className={classes.activityDismiss}
variant="subtle"
color="gray"
onClick={onMarkRead}
aria-label={t("activity.dismiss")}
>
<IconX size={15} />
</ActionIcon>
)}
@@ -529,13 +536,13 @@ export const AssistantPanel = ({
)}
{opened && (
<dialog className={classes.floatingPanel} aria-label={t("title")} open>
<Group className={classes.panelHeader} justify="space-between" wrap="nowrap">
<Group gap="xs" wrap="nowrap">
<Group className={classes.panelHeader} justify="space-between" wrap="nowrap" gap="xs">
<Group className={classes.panelIdentity} gap="xs" wrap="nowrap">
<ThemeIcon variant="light" color="red" radius="xl">
<IconRobot size={18} />
</ThemeIcon>
<div>
<Text fw={700} lh={1.1}>
<div className={classes.panelIdentityText}>
<Text fw={700} lh={1.1} lineClamp={1}>
{t("title")}
</Text>
<Text size="xs" c="dimmed" lineClamp={1}>
@@ -543,16 +550,27 @@ export const AssistantPanel = ({
</Text>
</div>
</Group>
<Group gap={2} wrap="nowrap">
<Group className={classes.panelActions} gap={2} wrap="nowrap">
<ConversationHistory />
<Tooltip label={t("newConversation")}>
<ThreadListPrimitive.New asChild>
<ActionIcon variant="subtle" color="gray" aria-label={t("newConversation")}>
<ActionIcon
className={classes.panelAction}
variant="subtle"
color="gray"
aria-label={t("newConversation")}
>
<IconPlus size={17} />
</ActionIcon>
</ThreadListPrimitive.New>
</Tooltip>
<ActionIcon variant="subtle" color="gray" onClick={onClose} aria-label={t("close")}>
<ActionIcon
className={classes.panelAction}
variant="subtle"
color="gray"
onClick={onClose}
aria-label={t("close")}
>
<IconX size={18} />
</ActionIcon>
</Group>