Skip to content

Commit 8b0a816

Browse files
anmolsinghbhatiaanmolsinghbhatia
authored
[WEB-5614] fix: sidebar and label dropdown #8364 
1 parent b7621c6 commit 8b0a816

File tree

3 files changed

+90
-138
lines changed

3 files changed

+90
-138
lines changed

‎apps/web/core/components/issues/issue-detail/label/select/label-select.tsx‎

Lines changed: 88 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
7171
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
7272

7373
const { styles, attributes } = usePopper(referenceElement, popperElement, {
74-
placement: "bottom-end",
74+
placement: "bottom-start",
7575
modifiers: [
7676
{
7777
name: "preventOverflow",
@@ -114,149 +114,101 @@ export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssue
114114
if (!issueId || !values) return <></>;
115115

116116
return (
117-
<Combobox
118-
as="div"
119-
className="size-full flex-shrink-0 text-left"
120-
value={issueLabels}
121-
onChange={(value) => onSelect(value)}
122-
multiple
123-
>
124-
<Combobox.Button as={Fragment}>
125-
<button
126-
ref={setReferenceElement}
127-
type="button"
128-
className="cursor-pointer size-full"
129-
onClick={() => !projectLabels && fetchLabels()}
130-
>
131-
{label}
132-
</button>
133-
</Combobox.Button>
134-
<Combobox.Options className="fixed z-10">
135-
<div
136-
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
137-
ref={setPopperElement}
138-
style={styles.popper}
139-
{...attributes.popper}
140-
>
141-
<div className="px-2">
142-
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
143-
<Search className="h-3.5 w-3.5 text-tertiary" />
144-
<Combobox.Input
145-
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
146-
value={query}
147-
onChange={(e) => setQuery(e.target.value)}
148-
placeholder={t("common.search.label")}
149-
displayValue={(assigned: any) => assigned?.name}
150-
onKeyDown={searchInputKeyDown}
151-
tabIndex={baseTabIndex}
152-
/>
117+
<>
118+
<Combobox
119+
as="div"
120+
className="size-full flex-shrink-0 text-left"
121+
value={issueLabels}
122+
onChange={(value) => onSelect(value)}
123+
multiple
124+
>
125+
<Combobox.Button as={Fragment}>
126+
<button
127+
ref={setReferenceElement}
128+
type="button"
129+
className="cursor-pointer size-full"
130+
onClick={() => !projectLabels && fetchLabels()}
131+
>
132+
{label}
133+
</button>
134+
</Combobox.Button>
135+
136+
<Combobox.Options className="fixed z-10">
137+
<div
138+
className={`z-10 my-1 w-48 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 shadow-raised-200 focus:outline-none`}
139+
ref={setPopperElement}
140+
style={styles.popper}
141+
{...attributes.popper}
142+
>
143+
<div className="px-2">
144+
<div className="flex w-full items-center justify-start rounded-sm border border-subtle bg-surface-2 px-2">
145+
<Search className="h-3.5 w-3.5 text-tertiary" />
146+
<Combobox.Input
147+
className="w-full bg-transparent px-2 py-1 text-11 text-secondary placeholder:text-placeholder focus:outline-none"
148+
value={query}
149+
onChange={(e) => setQuery(e.target.value)}
150+
placeholder={t("common.search.label")}
151+
displayValue={(assigned: any) => assigned?.name}
152+
onKeyDown={searchInputKeyDown}
153+
tabIndex={baseTabIndex}
154+
/>
155+
</div>
153156
</div>
154-
</div>
155-
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
156-
{isLoading ? (
157-
<p className="text-center text-secondary">{t("common.loading")}</p>
158-
) : filteredOptions.length > 0 ? (
159-
filteredOptions.map((option) => (
157+
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
158+
{isLoading ? (
159+
<p className="text-center text-secondary">{t("common.loading")}</p>
160+
) : filteredOptions.length > 0 ? (
161+
filteredOptions.map((option) => (
162+
<Combobox.Option
163+
key={option.value}
164+
value={option.value}
165+
className={({ selected }) =>
166+
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
167+
selected ? "text-primary" : "text-secondary"
168+
}`
169+
}
170+
>
171+
{({ selected }) => (
172+
<>
173+
{option.content}
174+
{selected && (
175+
<div className="flex-shrink-0">
176+
<Check className={`h-3.5 w-3.5`} />
177+
</div>
178+
)}
179+
</>
180+
)}
181+
</Combobox.Option>
182+
))
183+
) : submitting ? (
184+
<Loader className="spin h-3.5 w-3.5" />
185+
) : canCreateLabel ? (
160186
<Combobox.Option
161-
key={option.value}
162-
value={option.value}
163-
className={({ selected }) =>
164-
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
165-
selected ? "text-primary" : "text-secondary"
166-
}`
167-
}
187+
value={query}
188+
onClick={(e) => {
189+
e.preventDefault();
190+
e.stopPropagation();
191+
if (!query.length) return;
192+
handleAddLabel(query);
193+
}}
194+
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
168195
>
169-
{({ selected }) => (
196+
{query.length ? (
170197
<>
171-
{option.content}
172-
{selected && (
173-
<div className="flex-shrink-0">
174-
<Check className={`h-3.5 w-3.5`} />
175-
</div>
176-
)}
198+
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
199+
labels
177200
</>
201+
) : (
202+
t("label.create.type")
178203
)}
179204
</Combobox.Option>
180-
))
181-
) : submitting ? (
182-
<Loader className="spin h-3.5 w-3.5" />
183-
) : canCreateLabel ? (
184-
<Combobox.Option
185-
value={query}
186-
onClick={(e) => {
187-
e.preventDefault();
188-
e.stopPropagation();
189-
if (!query.length) return;
190-
handleAddLabel(query);
191-
}}
192-
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
193-
>
194-
{query.length ? (
195-
<>
196-
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to
197-
labels
198-
</>
199-
) : (
200-
t("label.create.type")
201-
)}
202-
</Combobox.Option>
203-
) : (
204-
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
205-
)}
206-
</div>
207-
</div>
208-
<div className={`vertical-scrollbar scrollbar-sm mt-2 max-h-48 space-y-1 overflow-y-scroll px-2 pr-0`}>
209-
{isLoading ? (
210-
<p className="text-center text-secondary">{t("common.loading")}</p>
211-
) : filteredOptions.length > 0 ? (
212-
filteredOptions.map((option) => (
213-
<Combobox.Option
214-
key={option.value}
215-
value={option.value}
216-
className={({ selected }) =>
217-
`flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
218-
selected ? "text-primary" : "text-secondary"
219-
}`
220-
}
221-
>
222-
{({ selected }) => (
223-
<>
224-
{option.content}
225-
{selected && (
226-
<div className="flex-shrink-0">
227-
<Check className={`h-3.5 w-3.5`} />
228-
</div>
229-
)}
230-
</>
231-
)}
232-
</Combobox.Option>
233-
))
234-
) : submitting ? (
235-
<Loader className="spin h-3.5 w-3.5" />
236-
) : canCreateLabel ? (
237-
<Combobox.Option
238-
value={query}
239-
onClick={(e) => {
240-
e.preventDefault();
241-
e.stopPropagation();
242-
if (!query.length) return;
243-
handleAddLabel(query);
244-
}}
245-
className={`text-left text-secondary ${query.length ? "cursor-pointer" : "cursor-default"}`}
246-
>
247-
{query.length ? (
248-
<>
249-
{/* TODO: Translate here */}+ Add <span className="text-primary">&quot;{query}&quot;</span> to labels
250-
</>
251205
) : (
252-
t("label.create.type")
206+
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
253207
)}
254-
</Combobox.Option>
255-
) : (
256-
<p className="text-left text-secondary ">{t("common.search.no_matching_results")}</p>
257-
)}
258-
</div>
259-
</Combobox.Options>
260-
</Combobox>
208+
</div>
209+
</div>
210+
</Combobox.Options>
211+
</Combobox>
212+
</>
261213
);
262214
});

‎apps/web/core/components/issues/issue-detail/sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props:
8181
<div className="flex items-center h-full w-full flex-col divide-y-2 divide-subtle-1 overflow-hidden">
8282
<div className="h-full w-full overflow-y-auto px-6">
8383
<h5 className="mt-5 text-body-xs-medium">{t("common.properties")}</h5>
84-
<div className={`mb-2 mt-4 space-y-2.5 ${!isEditable ? "opacity-60" : ""}`}>
84+
<div className={`mb-2 mt-4 space-y-2.5 truncate ${!isEditable ? "opacity-60" : ""}`}>
8585
<SidebarPropertyListItem icon={StatePropertyIcon} label={t("common.state")}>
8686
<StateDropdown
8787
value={issue?.state_id}

‎apps/web/core/components/issues/peek-overview/view.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ export const IssueView = observer(function IssueView(props: IIssueView) {
168168
{/* content */}
169169
<div className="vertical-scrollbar scrollbar-md relative h-full w-full overflow-hidden overflow-y-auto">
170170
{["side-peek", "modal"].includes(peekMode) ? (
171-
<div className="relative flex flex-col gap-3 px-12 py-6 space-y-3">
171+
<div className="relative flex flex-col gap-3 px-8 py-5 space-y-3">
172172
<PeekOverviewIssueDetails
173173
editorRef={editorRef}
174174
workspaceSlug={workspaceSlug}

0 commit comments

Comments
 (0)