Reduce the checkbox size and remove unnecessary spacing within the Directory Notes and Contact filters.
This commit is contained in:
parent
c1a31e6b3e
commit
b74c863794
@ -306,7 +306,7 @@ const DirectoryPageHeader = ({
|
||||
)}
|
||||
</a>
|
||||
|
||||
<div className="dropdown-menu p-0" style={{ minWidth: "700px" }}>
|
||||
<div className="dropdown-menu p-0" style={{ minWidth: "550px" }}>
|
||||
{/* Scrollable Filter Content */}
|
||||
<div
|
||||
className="p-3"
|
||||
@ -319,18 +319,19 @@ const DirectoryPageHeader = ({
|
||||
>
|
||||
<div className="d-flex gap-3">
|
||||
{/* Created By */}
|
||||
<div style={{ flex: 0.50, maxHeight: "260px", overflowY: "auto" }}>
|
||||
<div style={{ flexBasis: "30%", maxHeight: "260px", overflowY: "auto" }}>
|
||||
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||
<p className="text-muted mb-2 pt-2">Created By</p>
|
||||
</div>
|
||||
{allCreators.map((name, idx) => (
|
||||
<div className="form-check mb-1" key={`creator-${idx}`}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`creator-${idx}`}
|
||||
checked={selectedCreators.includes(name)}
|
||||
onChange={() => handleToggleCreator(name)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap" htmlFor={`creator-${idx}`}>
|
||||
{name}
|
||||
@ -340,18 +341,19 @@ const DirectoryPageHeader = ({
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div style={{ flex: 1, maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
|
||||
<div style={{ maxHeight: "260px", overflowY: "auto",overflowX: "hidden", }}>
|
||||
<div style={{ position: "sticky", top: 0, background: "#fff", zIndex: 1 }}>
|
||||
<p className="text-muted mb-2 pt-2">Organization</p>
|
||||
</div>
|
||||
{filteredOrganizations.map((org, idx) => (
|
||||
<div className="form-check mb-1" key={`org-${idx}`}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`org-${idx}`}
|
||||
checked={selectedOrgs.includes(org)}
|
||||
onChange={() => handleToggleOrg(org)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap" htmlFor={`org-${idx}`}>
|
||||
{org}
|
||||
@ -444,11 +446,12 @@ const DirectoryPageHeader = ({
|
||||
{filteredBuckets.map(({ id, name }) => (
|
||||
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`bucket-${id}`}
|
||||
checked={tempSelectedBucketIds.includes(id)}
|
||||
onChange={() => handleTempBucketChange(id)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap text-small" htmlFor={`bucket-${id}`}>
|
||||
{name}
|
||||
@ -463,11 +466,12 @@ const DirectoryPageHeader = ({
|
||||
{filteredCategories.map(({ id, name }) => (
|
||||
<div className="form-check me-3 mb-1" style={{ minWidth: "calc(50% - 15px)" }} key={id}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
className="form-check-input form-check-input-sm"
|
||||
type="checkbox"
|
||||
id={`cat-${id}`}
|
||||
checked={tempSelectedCategoryIds.includes(id)}
|
||||
onChange={() => handleTempCategoryChange(id)}
|
||||
style={{ width: "1rem", height: "1rem" }}
|
||||
/>
|
||||
<label className="form-check-label text-nowrap text-small" htmlFor={`cat-${id}`}>
|
||||
{name}
|
||||
|
Loading…
x
Reference in New Issue
Block a user