Qlockify/qlockify-frontend-deployment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(timesheet): prevent entry fields from overlapping and improve responsive layout

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-04-28 00:34:35 +03:30
parent a770272ce2
commit 9fceef3753
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/Timesheet.tsx
View File

@@ -750,7 +750,7 @@ function TagMultiSelect({
title={selectedLabels.length > 0 ? selectedLabels.join(", ") : title}
className={`inline-flex items-center gap-1 text-slate-700 dark:text-slate-200 ${
compact
? "h-12 max-w-full border-0 bg-transparent px-2 text-xs"
? "h-12 max-w-full border-0 bg-transparent px-2 text-xs overflow-hidden"
: "w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm dark:border-slate-700 dark:bg-slate-900"
} ${buttonClassName}`.trim()}
>
@@ -758,11 +758,13 @@ function TagMultiSelect({
<span className="inline-flex min-w-0 max-w-full items-center gap-1.5 overflow-hidden">
{selectedTagObjects.length > 0 && compactDisplayMode === "chips" ? (
<span className="flex min-w-0 max-w-full items-center gap-1 overflow-hidden whitespace-nowrap">
{selectedTagObjects.map((tag) => (
{selectedTagObjects.map((tag, index) => (
<span
key={tag.id}
title={tag.name}
className={`rounded-sm px-2 py-1 text-[11px] font-medium ${
className={`shrink rounded-sm px-2 py-1 text-[11px] font-medium ${
index === 0 ? "max-w-[96px]" : "max-w-[72px]"
} ${
tag.is_deleted
? "bg-slate-200 text-slate-700 line-through dark:bg-slate-700 dark:text-slate-200"
: "bg-sky-50 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300"
@@ -910,7 +912,6 @@ function ProjectInlineSelect({
position: "fixed",
top: openUpward ? `${rect.top - 8}px` : `${rect.bottom + 8}px`,
left: `${Math.max(12, rect.left)}px`,
width: `${dropdownWidth}px`,
transform: openUpward ? "translateY(-100%)" : "none",
zIndex: 100000,
});
@@ -1215,30 +1216,30 @@ function EntryEditorFields({
if (compact) {
const selectedProject = projects.find((project) => project.id === state.projectId);
return (
<div className="grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_minmax(0,1fr)_40px_188px_40px] items-center">
<div className="grid min-w-0 flex-1 grid-cols-[minmax(430px,1fr)_minmax(0,220px)_40px_188px_40px] 2xl:grid-cols-[minmax(430px,1fr)_minmax(0,max-content)_40px_188px_40px] items-center">
<div className="flex min-w-0 items-center">
<Input
value={state.description}
onChange={(event) => onChange({ description: event.target.value })}
placeholder={t.timesheet?.descriptionPlaceholder || "What are you working on?"}
className="h-12 w-[170px] shrink-0 rounded-none border-0 bg-transparent px-0 pe-3 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 truncate dark:bg-transparent dark:text-slate-100"
className="h-12 w-[200px] 2xl:w-[400px] shrink-0 rounded-none border-0 bg-transparent px-0 pe-3 text-sm shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 truncate dark:bg-transparent dark:text-slate-100"
/>
<span className="me-2 shrink-0 text-sm font-semibold leading-none text-sky-600 dark:text-sky-400">•</span>
<div className="flex items-center min-w-[170px] ">
<div className="flex flex-1 items-center gap-1">
<div className="flex min-w-0 flex-1 items-center">
<div className="flex min-w-0 flex-1 items-center gap-1">
<ProjectInlineSelect
projects={projects}
value={state.projectId}
onChange={(projectId) => (onProjectChange ? onProjectChange(projectId) : onChange({ projectId }))}
placeholder={t.timesheet?.projectLabel || "Project"}
portalOwnerId={portalOwnerId}
className=""
className="min-w-0 max-w-[150px] 2xl:max-w-max flex-1"
/>
{selectedProject?.client?.name && (
<span className="max-w-[136px] shrink-0 truncate text-sm text-slate-400 dark:text-slate-500" title={selectedProject.client.name}>
<span className="min-w-0 max-w-[120px] 2xl:max-w-max shrink truncate text-sm text-slate-400 dark:text-slate-500" title={selectedProject.client.name}>
- {selectedProject.client.name}
</span>
)}
@@ -1246,7 +1247,7 @@ function EntryEditorFields({
</div>
</div>
<div className="min-w-0 pe-2" dir="ltr">
<div className="min-w-0 overflow-hidden pe-2" dir="ltr">
<TagMultiSelect
tags={tags}
selectedTags={state.tags}
@@ -1256,8 +1257,8 @@ function EntryEditorFields({
compact
compactDisplayMode="chips"
portalOwnerId={portalOwnerId}
className="w-full"
buttonClassName="w-full max-w-[220px] justify-start overflow-hidden"
className="w-full min-w-0 overflow-hidden 2xl:w-auto 2xl:max-w-none"
buttonClassName="w-full min-w-0 max-w-full justify-start overflow-hidden 2xl:w-auto 2xl:max-w-none"
/>
</div>