[WEB 2418] Fix minor UI inconsistencies (#5568)

* fix: project features modal padding * fix: minor ui inconsistencies * fix: lint issue
makeplane · Sep 10, 2024 · 5eb868e · 5eb868e
1 parent 7c77fc1
commit 5eb868e
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/web/core/components/cycles/list/root.tsx b/web/core/components/cycles/list/root.tsx
@@ -19,7 +19,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
   const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
 
   return (
-    <ContentWrapper variant={ERowVariant.HUGGING}>
+    <ContentWrapper variant={ERowVariant.HUGGING} className="flex-row">
       <ListLayout>
         {isArchived ? (
           <>

diff --git a/web/core/components/dropdowns/module/index.tsx b/web/core/components/dropdowns/module/index.tsx
@@ -27,6 +27,7 @@ type Props = TDropdownProps & {
   showCount?: boolean;
   onClose?: () => void;
   renderByDefault?: boolean;
+  itemClassName?: string;
 } & (
     | {
         multiple: false;
@@ -51,6 +52,7 @@ type ButtonContentProps = {
   showCount: boolean;
   showTooltip?: boolean;
   value: string | string[] | null;
+  className?: string;
 };
 
 const ButtonContent: React.FC<ButtonContentProps> = (props) => {
@@ -65,6 +67,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
     showCount,
     showTooltip = false,
     value,
+    className,
   } = props;
   // store hooks
   const { getModuleById } = useModule();
@@ -87,13 +90,16 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
             )}
           </div>
         ) : value.length > 0 ? (
-          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5">
+          <div className="flex max-w-full flex-grow flex-wrap items-center gap-2 truncate py-0.5 ">
             {value.map((moduleId) => {
               const moduleDetails = getModuleById(moduleId);
               return (
                 <div
                   key={moduleId}
-                  className="flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200"
+                  className={cn(
+                    "flex max-w-full items-center gap-1 rounded bg-custom-background-80 py-1 text-custom-text-200",
+                    className
+                  )}
                 >
                   {!hideIcon && <DiceIcon className="h-2.5 w-2.5 flex-shrink-0" />}
                   {!hideText && (
@@ -159,6 +165,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
   const {
     button,
     buttonClassName,
+    itemClassName = "",
     buttonContainerClassName,
     buttonVariant,
     className = "",
@@ -270,6 +277,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
               showTooltip={showTooltip}
               value={value}
               onChange={onChange as any}
+              className={itemClassName}
             />
           </DropdownButton>
         </button>

diff --git a/web/core/components/issues/issue-detail/module-select.tsx b/web/core/components/issues/issue-detail/module-select.tsx
@@ -69,6 +69,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         dropdownArrow
         dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
         multiple
+        itemClassName="px-2"
       />
     </div>
   );

diff --git a/web/core/store/issue/issue.store.ts b/web/core/store/issue/issue.store.ts
@@ -1,6 +1,6 @@
-import update from "lodash/update";
 import isEmpty from "lodash/isEmpty";
 import set from "lodash/set";
+import update from "lodash/update";
 import { action, makeObservable, observable, runInAction } from "mobx";
 import { computedFn } from "mobx-utils";
 // types