administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-06-21 03:41:55 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Improve mobile layout and spacing

Browse Source
This commit is contained in:
Nicolas Mowen 2026-05-14 10:48:08 -06:00
parent b3fd12ed70
commit 4bad948542
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/chat/ChatSettings.tsx
View File

@ -35,12 +35,12 @@ export default function ChatSettings({
const trigger = (
<Button
className="flex items-center gap-2"
className="flex items-center md:gap-2"
aria-label={t("settings.title")}
size="sm"
>
<FaCog className="text-secondary-foreground" />
{t("settings.title")}
<span className="hidden md:inline">{t("settings.title")}</span>
</Button>
);

4
web/src/components/chat/ChatStartingState.tsx
View File

@ -54,7 +54,9 @@ export function ChatStartingState({ onSendMessage }: ChatStartingStateProps) {
<div className="flex size-full flex-col items-center justify-center gap-6 p-8">
<div className="flex flex-col items-center gap-2">
<h1 className="text-4xl font-bold text-foreground">{t("title")}</h1>
<p className="text-muted-foreground">{t("subtitle")}</p>
<p className="text-center text-muted-foreground md:text-left">
{t("subtitle")}
</p>
</div>
<div className="flex w-full max-w-2xl flex-col items-center gap-4">

10
web/src/pages/Chat.tsx
View File

@ -165,16 +165,16 @@ export default function ChatPage() {
return (
<div className="flex size-full flex-col">
<div className="flex shrink-0 items-center justify-end gap-2 px-2 pt-2 md:px-4 md:pt-4">
<div className="flex shrink-0 items-center justify-end gap-2 px-2 pb-3 pt-2 md:px-4 md:pt-4">
{hasStarted && (
<Button
className="flex items-center gap-2"
className="flex items-center md:gap-2"
aria-label={t("new_chat")}
size="sm"
onClick={startNewChat}
>
<LuMessageSquarePlus className="text-secondary-foreground" />
{t("new_chat")}
<span className="hidden md:inline">{t("new_chat")}</span>
</Button>
)}
<ChatSettings
@ -191,7 +191,7 @@ export default function ChatPage() {
<div className="flex flex-1 justify-center px-2 md:px-4">
<div className="flex w-full flex-col xl:w-[50%] 3xl:w-[35%]">
{hasStarted ? (
<div className="flex w-full flex-1 flex-col gap-3 pb-3 pt-3">
<div className="flex w-full flex-1 flex-col gap-3 pb-3">
{messages.map((msg, i) => {
const isLastAssistant =
i === messages.length - 1 && msg.role === "assistant";
@ -295,7 +295,7 @@ export default function ChatPage() {
</div>
</div>
{hasStarted && (
<div className="flex shrink-0 justify-center px-2 pb-2 md:px-4 md:pb-4">
<div className="flex shrink-0 justify-center p-2 md:px-4 md:pb-4">
<div className="flex w-full xl:w-[50%] 3xl:w-[35%]">
<ChatEntry
input={input}