JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

fix: UI overflowing issues

Browse Source
This commit is contained in:
John Costa
2025-07-18 16:00:43 +01:00
parent 0d5e6146f2
commit bb3ae507ea
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/app-wrapper/index.tsx
View File

@ -3,7 +3,7 @@ import { Component, ParentProps } from "solid-js";
export const AppWrapper: Component<ParentProps> = (props) => { export const AppWrapper: Component<ParentProps> = (props) => {
return ( return (
<div class="w-full flex flex-col items-center h-screen"> <div class="w-full flex flex-col items-center h-screen">
<div class="container flex flex-col w-full h-full gap-4 m-4"> <div class="container flex flex-col w-full h-full gap-4 p-4">
{props.children} {props.children}
</div> </div>
</div> </div>

10
frontend/src/components/app-wrapper/with-topbar-and-dock.tsx
View File

@ -5,9 +5,13 @@ import { Dock } from "./dock";
export const WithTopbarAndDock: Component<ParentProps> = (props) => { export const WithTopbarAndDock: Component<ParentProps> = (props) => {
return ( return (
<> <>
<Topbar /> <div class="">
{props.children} <Topbar />
<Dock /> </div>
<div class="h-full overflow-y-auto">{props.children}</div>
<div class="">
<Dock />
</div>
</> </>
); );
}; };

4
frontend/src/pages/front/Recent.tsx
View File

@ -2,6 +2,8 @@ import { Component, For } from "solid-js";
import { ImageComponent } from "@components/image"; import { ImageComponent } from "@components/image";
import { useSearchImageContext } from "@contexts/SearchImageContext"; import { useSearchImageContext } from "@contexts/SearchImageContext";
const NUMBER_OF_MAX_RECENT_IMAGES = 10;
export const Recent: Component = () => { export const Recent: Component = () => {
const { userImages } = useSearchImageContext(); const { userImages } = useSearchImageContext();
@ -11,7 +13,7 @@ export const Recent: Component = () => {
(a, b) => (a, b) =>
new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(), new Date(b.CreatedAt!).getTime() - new Date(a.CreatedAt!).getTime(),
) )
.slice(0, 10); .slice(0, NUMBER_OF_MAX_RECENT_IMAGES);
return ( return (
<div class="rounded-xl bg-white p-4 flex flex-col gap-2"> <div class="rounded-xl bg-white p-4 flex flex-col gap-2">