fix: resolved overflow issue with longer state names (#1444)

makeplane · Jul 7, 2023 · d564ea8 · d564ea8 · vercel · Jul 7, 2023
1 parent 7868bfa
commit d564ea8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 8 deletions.
diff --git a/apps/app/components/core/board-view/board-header.tsx b/apps/app/components/core/board-view/board-header.tsx
@@ -118,13 +118,13 @@ export const BoardHeader: React.FC<Props> = ({
     >
       <div className={`flex items-center ${!isCollapsed ? "flex-col gap-2" : "gap-1"}`}>
         <div
-          className={`flex cursor-pointer items-center gap-x-3 ${
+          className={`flex cursor-pointer items-center gap-x-3 max-w-[316px] ${
             !isCollapsed ? "mb-2 flex-col gap-y-2 py-2" : ""
           }`}
         >
           <span className="flex items-center">{getGroupIcon()}</span>
           <h2
-            className="text-lg font-semibold capitalize"
+            className="text-lg font-semibold capitalize truncate"
             style={{
               writingMode: !isCollapsed ? "vertical-rl" : "horizontal-tb",
             }}

diff --git a/apps/app/components/core/calendar-view/single-issue.tsx b/apps/app/components/core/calendar-view/single-issue.tsx
@@ -210,7 +210,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
           </a>
         </Link>
         {displayProperties && (
-          <div className="relative mt-1.5 flex flex-wrap items-center gap-2 text-xs">
+          <div className="relative mt-1.5 w-full flex flex-wrap items-center gap-2 text-xs">
             {properties.priority && (
               <ViewPrioritySelect
                 issue={issue}
@@ -225,6 +225,7 @@ export const SingleCalendarIssue: React.FC<Props> = ({
                 issue={issue}
                 partialUpdateIssue={partialUpdateIssue}
                 position="left"
+                className="max-w-full"
                 isNotAllowed={isNotAllowed}
                 user={user}
               />

diff --git a/apps/app/components/core/spreadsheet-view/single-issue.tsx b/apps/app/components/core/spreadsheet-view/single-issue.tsx
@@ -275,6 +275,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
             issue={issue}
             partialUpdateIssue={partialUpdateIssue}
             position="left"
+            className="max-w-full"
             tooltipPosition={tooltipPosition}
             customButton
             user={user}

diff --git a/apps/app/components/issues/view-select/state.tsx b/apps/app/components/issues/view-select/state.tsx
@@ -22,6 +22,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   position?: "left" | "right";
   tooltipPosition?: "top" | "bottom";
+  className?: string;
   selfPositioned?: boolean;
   customButton?: boolean;
   user: ICurrentUserResponse | undefined;
@@ -33,6 +34,7 @@ export const ViewStateSelect: React.FC<Props> = ({
   partialUpdateIssue,
   position = "left",
   tooltipPosition = "top",
+  className = "",
   selfPositioned = false,
   customButton = false,
   user,
@@ -68,16 +70,19 @@ export const ViewStateSelect: React.FC<Props> = ({
       tooltipContent={addSpaceIfCamelCase(selectedOption?.name ?? "")}
       position={tooltipPosition}
     >
-      <div className="flex items-center cursor-pointer gap-2 text-brand-secondary">
-        {selectedOption &&
-          getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
-        {selectedOption?.name ?? "State"}
+      <div className="flex items-center cursor-pointer w-full gap-2 text-brand-secondary">
+        <span className="h-4 w-4">
+          {selectedOption &&
+            getStateGroupIcon(selectedOption.group, "16", "16", selectedOption.color)}
+        </span>
+        <span className="truncate">{selectedOption?.name ?? "State"}</span>
       </div>
     </Tooltip>
   );
 
   return (
     <CustomSearchSelect
+      className={className}
       value={issue.state}
       onChange={(data: string) => {
         partialUpdateIssue(

diff --git a/apps/app/components/ui/custom-search-select.tsx b/apps/app/components/ui/custom-search-select.tsx
@@ -23,6 +23,7 @@ type CustomSearchSelectProps = {
   verticalPosition?: "top" | "bottom";
   noChevron?: boolean;
   customButton?: JSX.Element;
+  className?: string;
   optionsClassName?: string;
   input?: boolean;
   disabled?: boolean;
@@ -43,6 +44,7 @@ export const CustomSearchSelect = ({
   verticalPosition = "bottom",
   noChevron = false,
   customButton,
+  className = "",
   optionsClassName = "",
   input = false,
   disabled = false,
@@ -70,7 +72,7 @@ export const CustomSearchSelect = ({
   return (
     <Combobox
       as="div"
-      className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
+      className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left ${className}`}
       {...props}
     >
       {({ open }: any) => (