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

src/pages/Timesheet.tsx

@@ -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 min-w-0 flex-1 items-center">
-            <div className="flex flex-1 items-center gap-1">
+            <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"
+            className="w-full min-w-0 overflow-hidden 2xl:w-auto 2xl:max-w-none"
-            buttonClassName="w-full max-w-[220px] justify-start overflow-hidden"
+            buttonClassName="w-full min-w-0 max-w-full justify-start overflow-hidden 2xl:w-auto 2xl:max-w-none"
           />
         </div>