10000 Use wrapping for audit log when in deployment settings · coder/coder@fe36168 · GitHub
[go: up one dir, main page]
Skip to content

Commit fe36168

Browse files
code-ashercode-asher
committed
Use wrapping for audit log when in deployment settings
Otherwise the input is teeny tiny and barely fits a few characters.
1 parent fb1b8f0 commit fe36168

File tree

3 files changed

+15
-8
lines changed

3 files changed

+15
-8
lines changed

‎site/src/components/Filter/SelectFilter.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
5252
<SelectMenuTrigger>
5353
<SelectMenuButton
5454
startIcon={selectedOption?.startIcon}
55-
css={{ width }}
55+
css={{ width, flexGrow: 1 }}
5656
aria-label={label}
5757
>
5858
{selectedOption?.label ?? placeholder}

‎site/src/components/Filter/filter.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,8 @@ type FilterProps = {
142142
error?: unknown;
143143
options?: ReactNode;
144144
presets: PresetFilter[];
145+
/** Set to true if there is not much horizontal space. */
146+
compact?: boolean;
145147
};
146148

147149
export const Filter: FC<FilterProps> = ({
@@ -154,6 +156,7 @@ export const Filter: FC<FilterProps> = ({
154156
learnMoreLabel2,
155157
learnMoreLink2,
156158
presets,
159+
compact,
157160
}) => {
158161
const theme = useTheme();
159162
// Storing local copy of the filter query so that it can be updated more
@@ -184,7 +187,10 @@ export const Filter: FC<FilterProps> = ({
184187
display: "flex",
185188
gap: 8,
186189
marginBottom: 16,
187-
flexWrap: "nowrap",
190+
// For now compact just means immediately wrapping, but maybe we should
191+
// have a collapsible section or consolidate into one menu or something.
192+
// TODO: Remove separate compact mode once multi-org is stable.
193+
flexWrap: compact ? "wrap" : "nowrap",
188194

189195
[theme.breakpoints.down("md")]: {
190196
flexWrap: "wrap",

‎site/src/pages/AuditPage/AuditFilter.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,23 @@ interface AuditFilterProps {
5151
}
5252

5353
export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
54-
// Use a smaller width if including the organization filter.
55-
const width = menus.organization && 175;
5654
return (
5755
<Filter
5856
learnMoreLink={docs("/admin/audit-logs#filtering-logs")}
5957
presets={PRESET_FILTERS}
6058
isLoading={menus.user.isInitializing}
6159
filter={filter}
6260
error={error}
61+
// There is not much space with the sidebar and four filters, so in this
62+
// case we will use the compact mode.
63+
compact={Boolean(menus.organization)}
6364
options={
6465
<>
65-
<ResourceTypeMenu width={width} menu={menus.resourceType} />
66-
<ActionMenu width={width} menu={menus.action} />
67-
<UserMenu width={width} menu={menus.user} />
66+
<ResourceTypeMenu menu={menus.resourceType} />
67+
<ActionMenu menu={menus.action} />
68+
<UserMenu menu={menus.user} />
6869
{menus.organization && (
69-
<OrganizationsMenu width={width} menu={menus.organization} />
70+
<OrganizationsMenu menu={menus.organization} />
7071
)}
7172
</>
7273
}

0 commit comments

Comments
 (0)
0