Fixed block and inline dropdown buttons

src/short-urls/helpers/ShortUrlsFilterDropdown.tsx

@@ -17,7 +17,7 @@ export const ShortUrlsFilterDropdown = (
   const onFilterClick = (key: keyof ShortUrlsFilter) => () => onChange({ ...selected, [key]: !selected?.[key] });
 
   return (
-    <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
       <DropdownItem header>Visits:</DropdownItem>
       <DropdownItem active={excludeBots} onClick={onFilterClick('excludeBots')}>Ignore visits from bots</DropdownItem>
 

src/utils/DropdownBtn.scss

@@ -2,13 +2,17 @@
 
 @import '../utils/mixins/vertical-align';
 
+.dropdown-btn__toggle.dropdown-btn__toggle {
+  text-align: left;
+  padding-right: 1.75rem;
+}
+
 .dropdown-btn__toggle.dropdown-btn__toggle,
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled).active,
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):active,
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):focus,
 .dropdown-btn__toggle.dropdown-btn__toggle:not(:disabled):not(.disabled):hover,
 .show > .dropdown-btn__toggle.dropdown-btn__toggle.dropdown-toggle {
-  text-align: left;
   color: var(--input-text-color);
   background-color: var(--primary-color);
   border-color: var(--input-border-color);

src/utils/DropdownBtn.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { FC, PropsWithChildren } from 'react';
 import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
 import { useToggle } from './helpers/hooks';
@@ -9,14 +10,15 @@ export type DropdownBtnProps = PropsWithChildren<{
   className?: string;
   dropdownClassName?: string;
   right?: boolean;
+  inline?: boolean;
   minWidth?: number;
 }>;
 
 export const DropdownBtn: FC<DropdownBtnProps> = (
-  { text, disabled = false, className = '', children, dropdownClassName, right = false, minWidth },
+  { text, disabled = false, className, children, dropdownClassName, right = false, minWidth, inline },
 ) => {
   const [isOpen, toggle] = useToggle();
-  const toggleClasses = `dropdown-btn__toggle btn-block ${className}`;
+  const toggleClasses = classNames('dropdown-btn__toggle', className, { 'btn-block': !inline });
   const style = { minWidth: minWidth && `${minWidth}px` };
 
   return (

src/utils/ExportBtn.tsx

@@ -5,10 +5,10 @@ import type { ButtonProps } from 'reactstrap';
 import { Button } from 'reactstrap';
 import { prettify } from './helpers/numbers';
 
-interface ExportBtnProps extends Omit<ButtonProps, 'outline' | 'color' | 'disabled'> {
+type ExportBtnProps = Omit<ButtonProps, 'outline' | 'color' | 'disabled'> & {
   amount?: number;
   loading?: boolean;
-}
+};
 
 export const ExportBtn: FC<ExportBtnProps> = ({ amount = 0, loading = false, ...rest }) => (
   <Button {...rest} outline color="primary" disabled={loading}>

src/visits/helpers/VisitsFilterDropdown.tsx

@@ -22,7 +22,7 @@ export const VisitsFilterDropdown = (
   const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
 
   return (
-    <DropdownBtn text="Filters" dropdownClassName={className} className="me-3" right minWidth={250}>
+    <DropdownBtn text="Filters" dropdownClassName={className} inline right minWidth={250}>
       <DropdownItem header>Bots:</DropdownItem>
       <DropdownItem active={excludeBots} onClick={onBotsClick}>Exclude potential bots</DropdownItem>