Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-23 14:52:18 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve mobile responsive layouts

Browse Source
This commit is contained in:
Amruth Pillai
2026-07-04 23:54:02 +02:00
parent 3f6e22addb
commit 8416a92153
7 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/routes/dashboard/resumes/-components/list-view.tsx
+6 -6
View File
@@ -56,11 +56,11 @@ export function ListView({ resumes, hasResumes }: ListViewProps) {
onClick={handleCreateResume}
>
<PlusIcon />
<div className="min-w-80 truncate">
<div className="min-w-0 flex-1 truncate">
<Trans>Create a new resume</Trans>
</div>
<p className="text-xs opacity-60">
<p className="hidden text-xs opacity-60 sm:block">
<Trans>Start building your resume from scratch</Trans>
</p>
</Button>
@@ -81,11 +81,11 @@ export function ListView({ resumes, hasResumes }: ListViewProps) {
>
<DownloadSimpleIcon />
<div className="min-w-80 truncate">
<div className="min-w-0 flex-1 truncate">
<Trans>Import an existing resume</Trans>
</div>
<p className="text-xs opacity-60">
<p className="hidden text-xs opacity-60 sm:block">
<Trans>Continue where you left off</Trans>
</p>
</Button>
@@ -132,9 +132,9 @@ function ResumeListItem({ resume }: ResumeListItemProps) {
render={
<Link to="/builder/$resumeId" params={{ resumeId: resume.id }}>
<div className="size-3" />
<div className="min-w-80 truncate">{resume.name}</div>
<div className="min-w-0 flex-1 truncate">{resume.name}</div>
<p className="text-xs opacity-60">
<p className="hidden text-xs opacity-60 sm:block">
<Trans>Last updated on {updatedAt}</Trans>
</p>
</Link>
apps/web/src/routes/dashboard/resumes/index.tsx
+12 -8
View File
@@ -101,12 +101,13 @@ function RouteComponent() {
<Separator />
<div className="flex items-center gap-x-4">
<div className="flex gap-2">
<Label>
<div className="grid gap-3 sm:flex sm:flex-wrap sm:items-center">
<div className="grid min-w-0 gap-1.5 sm:flex sm:items-center sm:gap-2">
<Label className="text-muted-foreground text-xs sm:text-sm">
<Trans>Sort by</Trans>
</Label>
<Combobox
className="w-full sm:w-44"
value={sort}
options={sortOptions}
placeholder={t`Sort by`}
@@ -117,12 +118,15 @@ function RouteComponent() {
/>
</div>
<div className={cn("flex gap-2", { hidden: tagOptions.length === 0 })}>
<Label>
<div
className={cn("grid min-w-0 gap-1.5 sm:flex sm:items-center sm:gap-2", { hidden: tagOptions.length === 0 })}
>
<Label className="text-muted-foreground text-xs sm:text-sm">
<Trans>Filter by</Trans>
</Label>
<Combobox
multiple
className="w-full sm:w-44"
value={tags}
options={tagOptions}
placeholder={t`Filter by`}
@@ -133,7 +137,7 @@ function RouteComponent() {
</div>
{(resumes?.length ?? 0) > 5 && (
<InputGroup className="w-56">
<InputGroup className="w-full sm:w-56 lg:w-64">
<InputGroupAddon align="inline-start">
<MagnifyingGlassIcon />
</InputGroupAddon>
@@ -148,8 +152,8 @@ function RouteComponent() {
</InputGroup>
)}
<Tabs className="ltr:ms-auto rtl:me-auto" value={view}>
<TabsList>
<Tabs className="w-full sm:w-auto ltr:sm:ms-auto rtl:sm:me-auto" value={view}>
<TabsList className="grid w-full grid-cols-2 sm:inline-flex sm:w-fit">
<TabsTrigger
value="grid"
nativeButton={false}