administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-07-03 02:21:13 +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 = ( const trigger = (
<Button <Button
className="flex items-center gap-2" className="flex items-center md:gap-2"
aria-label={t("settings.title")} aria-label={t("settings.title")}
size="sm" size="sm"
> >
<FaCog className="text-secondary-foreground" /> <FaCog className="text-secondary-foreground" />
{t("settings.title")} <span className="hidden md:inline">{t("settings.title")}</span>
</Button> </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 size-full flex-col items-center justify-center gap-6 p-8">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<h1 className="text-4xl font-bold text-foreground">{t("title")}</h1> <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>
<div className="flex w-full max-w-2xl flex-col items-center gap-4"> <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 ( return (
<div className="flex size-full flex-col"> <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 && ( {hasStarted && (
<Button <Button
className="flex items-center gap-2" className="flex items-center md:gap-2"
aria-label={t("new_chat")} aria-label={t("new_chat")}
size="sm" size="sm"
onClick={startNewChat} onClick={startNewChat}
> >
<LuMessageSquarePlus className="text-secondary-foreground" /> <LuMessageSquarePlus className="text-secondary-foreground" />
{t("new_chat")} <span className="hidden md:inline">{t("new_chat")}</span>
</Button> </Button>
)} )}
<ChatSettings <ChatSettings
@ -191,7 +191,7 @@ export default function ChatPage() {
<div className="flex flex-1 justify-center px-2 md:px-4"> <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%]"> <div className="flex w-full flex-col xl:w-[50%] 3xl:w-[35%]">
{hasStarted ? ( {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) => { {messages.map((msg, i) => {
const isLastAssistant = const isLastAssistant =
i === messages.length - 1 && msg.role === "assistant"; i === messages.length - 1 && msg.role === "assistant";
@ -295,7 +295,7 @@ export default function ChatPage() {
</div> </div>
</div> </div>
{hasStarted && ( {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%]"> <div className="flex w-full xl:w-[50%] 3xl:w-[35%]">
<ChatEntry <ChatEntry
input={input} input={input}