@brickclay-org/ui 0.1.80 → 0.1.82

package/index.d.ts

@@ -1028,6 +1028,22 @@ declare function parseColor(input: string | null | undefined): Rgb | null;
  */
 declare function deriveAppearance(color: string | null | undefined, fill?: ColorFill): ColorAppearance;
 
+interface BkSelectGridColumn {
+    /** Property read from each item. Dot-separated paths are supported. */
+    key: string;
+    /** Column heading. */
+    label: string;
+    /** CSS width/min-width values, e.g. `120px` or `25%`. */
+    width?: string;
+    minWidth?: string;
+    align?: 'left' | 'center' | 'right';
+    type?: 'text' | 'badge';
+    /** Optional display transform; the original item is supplied as well. */
+    formatter?: (value: any, item: any) => string;
+    /** Badge colour by cell value, e.g. `{ Active: '#16a34a' }`. */
+    badgeColors?: Record<string, BadgeColor>;
+    badgeVariant?: BadgeVariant;
+}
 declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy {
     items: _angular_core.InputSignal<any[]>;
     bindLabel: _angular_core.InputSignal<string>;
@@ -1040,6 +1056,18 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     clearAllText: _angular_core.InputSignal<string>;
     groupBy: _angular_core.InputSignal<string>;
     colorKey: _angular_core.InputSignal<string>;
+    /** Opt-in table-like dropdown. The existing list is the unchanged default. */
+    dropdownView: _angular_core.InputSignal<"list" | "grid">;
+    gridColumns: _angular_core.InputSignal<BkSelectGridColumn[]>;
+    /** Stage multi-grid changes until Apply is clicked. */
+    gridSelectionActions: _angular_core.InputSignal<boolean>;
+    gridMinWidth: _angular_core.InputSignal<string>;
+    gridMaxHeight: _angular_core.InputSignal<string>;
+    /** One or two item keys used for the selected grid value/chip label. */
+    gridSelectedLabelKeys: _angular_core.InputSignal<string[]>;
+    gridSelectedLabelSeparator: _angular_core.InputSignal<string>;
+    gridApplyText: _angular_core.InputSignal<string>;
+    gridClearText: _angular_core.InputSignal<string>;
     /**
      * Show an accent dot beside each option, driven by `colorKey`.
      *
@@ -1080,7 +1108,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     disabled: _angular_core.ModelSignal<boolean>;
     loading: _angular_core.InputSignal<boolean>;
     closeOnSelect: _angular_core.InputSignal<boolean>;
-    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
+    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
     hasError: boolean;
     errorMessage: string;
     appendToBody: _angular_core.InputSignal<boolean>;
@@ -1107,9 +1135,10 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     private static activeInstance;
     isOpen: _angular_core.WritableSignal<boolean>;
     selectedOptions: _angular_core.WritableSignal<any[]>;
+    private gridDraftOptions;
     searchTerm: _angular_core.WritableSignal<string>;
     markedIndex: _angular_core.WritableSignal<number>;
-    placement: _angular_core.WritableSignal<"top" | "bottom">;
+    placement: _angular_core.WritableSignal<"bottom" | "top">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;
@@ -1160,6 +1189,13 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     private recomputeVisibleChips;
     resolveLabel(item: any): string;
     resolveValue(item: any): any;
+    resolveGridCell(item: any, column: BkSelectGridColumn): string;
+    private readItemValue;
+    gridColumnStyle(column: BkSelectGridColumn): Record<string, string>;
+    gridBadgeColor(item: any, column: BkSelectGridColumn): BadgeColor;
+    isGridItemSelected(item: any): boolean;
+    gridSelectedCount(): number;
+    private usesGridDraft;
     isItemSelected(item: any): boolean;
     isItemDisabled(item: any): boolean;
     compareWith: _angular_core.InputSignal<(a: any, b: any) => boolean>;
@@ -1177,6 +1213,9 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     applyPlacement(): void;
     toggleSelectAll(event: Event): void;
     handleSelection(item: any, event?: Event): void;
+    handleGridSelection(item: any, event?: Event): void;
+    clearGridDraft(): void;
+    applyGridDraft(): void;
     removeOption(item: any, event: Event): void;
     handleClear(event: Event): void;
     private updateModel;
@@ -1241,7 +1280,7 @@ declare class BkSelect implements ControlValueAccessor, AfterViewInit, OnDestroy
     getTooltipIfEllipsed(el: HTMLElement, text: string): string;
     onOptionHover(index: number): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<BkSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindIcon": { "alias": "bindIcon"; "required": false; "isSignal": true; }; "isResponsive": { "alias": "isResponsive"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "avatarKey": { "alias": "avatarKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<BkSelect, "bk-select", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "bindLabel": { "alias": "bindLabel"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "bindIcon": { "alias": "bindIcon"; "required": false; "isSignal": true; }; "isResponsive": { "alias": "isResponsive"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "notFoundText": { "alias": "notFoundText"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; "clearAllText": { "alias": "clearAllText"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "colorKey": { "alias": "colorKey"; "required": false; "isSignal": true; }; "dropdownView": { "alias": "dropdownView"; "required": false; "isSignal": true; }; "gridColumns": { "alias": "gridColumns"; "required": false; "isSignal": true; }; "gridSelectionActions": { "alias": "gridSelectionActions"; "required": false; "isSignal": true; }; "gridMinWidth": { "alias": "gridMinWidth"; "required": false; "isSignal": true; }; "gridMaxHeight": { "alias": "gridMaxHeight"; "required": false; "isSignal": true; }; "gridSelectedLabelKeys": { "alias": "gridSelectedLabelKeys"; "required": false; "isSignal": true; }; "gridSelectedLabelSeparator": { "alias": "gridSelectedLabelSeparator"; "required": false; "isSignal": true; }; "gridApplyText": { "alias": "gridApplyText"; "required": false; "isSignal": true; }; "gridClearText": { "alias": "gridClearText"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "avatarKey": { "alias": "avatarKey"; "required": false; "isSignal": true; }; "iconAlt": { "alias": "iconAlt"; "required": false; }; "label": { "alias": "label"; "required": false; }; "required": { "alias": "required"; "required": false; }; "variation": { "alias": "variation"; "required": false; }; "iconSrc": { "alias": "iconSrc"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxLabels": { "alias": "maxLabels"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "allSelect": { "alias": "allSelect"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; "dropdownPosition": { "alias": "dropdownPosition"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "appendToBody": { "alias": "appendToBody"; "required": false; "isSignal": true; }; "compareWith": { "alias": "compareWith"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "open": "open"; "close": "close"; "focus": "focus"; "blur": "blur"; "search": "search"; "clear": "clear"; "change": "change"; "scrollToEnd": "scrollToEnd"; }, never, never, true, never>;
 }
 
 type BkInputType = 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
@@ -2285,7 +2324,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     /** When true, dropdown is positioned fixed and sized to the trigger (use inside modals/popups). */
     appendToBody: _angular_core.InputSignal<boolean>;
     /** Open above or below the trigger (also used when appendToBody is true for fixed coordinates). */
-    dropdownPosition: _angular_core.InputSignal<"top" | "bottom">;
+    dropdownPosition: _angular_core.InputSignal<"bottom" | "top">;
     /** Key for option color (e.g. "color"). When set, option label and selected value use this color. */
     colorKey: _angular_core.InputSignal<string>;
     /**
@@ -2314,7 +2353,7 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     controlWrapper: ElementRef<HTMLDivElement>;
     dropdownPanel?: ElementRef<HTMLDivElement>;
     private el;
-    placement: _angular_core.WritableSignal<"top" | "bottom">;
+    placement: _angular_core.WritableSignal<"bottom" | "top">;
     private originalPanelParent;
     private originalPanelAnchor;
     private panelInBody;
@@ -2337,6 +2376,8 @@ declare class BkHierarchicalSelect implements ControlValueAccessor, AfterViewIni
     /** Runs after the panel has rendered: relocate (append mode) + position + focus. */
     private afterOpenInit;
     isOpen: _angular_core.WritableSignal<boolean>;
+    /** Hidden until its real height has been measured and final placement applied. */
+    panelReady: _angular_core.WritableSignal<boolean>;
     dropdownStyle: _angular_core.WritableSignal<{
         top?: string;
         bottom?: string;
@@ -3854,7 +3895,7 @@ declare class BkTd extends BkCellBase implements AfterViewInit, OnDestroy {
      */
     protected readonly truncatedTooltip: _angular_core.WritableSignal<string>;
     /** Forwarded to the content wrapper's `bkTooltip`. Override on a column whose default 'right' would run into its neighbour. */
-    tooltipPosition: _angular_core.InputSignal<"left" | "right" | "top" | "bottom">;
+    tooltipPosition: _angular_core.InputSignal<"bottom" | "top" | "left" | "right">;
     /** Only present when `ellipsis()` is true — see the `@else` branch in the template. */
     private ellipsisTextRef?;
     checkbox: _angular_core.InputSignal<boolean>;
@@ -4172,4 +4213,4 @@ declare class BkTreeDrag<T = any> extends BkTableDrag implements OnDestroy {
 declare const BK_TABLE: readonly [typeof BkTable, typeof BkTableTitle, typeof BkTableFooter, typeof BkVirtualScroll, typeof BkTh, typeof BkTd, typeof BkTrExpand, typeof BkTableSummary, typeof BkTableDrag, typeof BkDragHandle, typeof BkTreeDrag];
 
 export { BKTooltipDirective, BK_DEFAULT_DIALOG_CONFIG, BK_DIALOG_DATA, BK_DIALOG_GLOBAL_CONFIG, BK_TABLE, BkAvatar, BkAvatarGroup, BkAvatarUploader, BkBadge, BkBreadcrumb, BkButton, BkButtonGroup, BkCalendarManagerService, BkCheckbox, BkColumnFilterService, BkColumnSelect, BkCustomCalendar, BkDialogActions, BkDialogClose, BkDialogContent, BkDialogModule, BkDialogRef, BkDialogService, BkDialogTitle, BkDragHandle, BkDropdown, BkFileCard, BkFilePicker, BkGrid, BkHierarchicalSelect, BkIconButton, BkInput, BkInputChips, BkLoader, BkMenu, BkPagination, BkPill, BkPopover, BkRadioButton, BkScheduledDatePicker, BkSelect, BkSpinner, BkTable, BkTableDrag, BkTableFooter, BkTableSummary, BkTableTitle, BkTabs, BkTd, BkTextarea, BkTh, BkTimePicker, BkToastr, BkToastrService, BkToggle, BkTrExpand, BkTreeDrag, BkValidator, BkVirtualScroll, BrickclayIcons, BrickclayLib, CalendarModule, CalendarSelection, ColumnFilterOption, NEUTRAL_APPEARANCE, POPOVER_PLACEMENTS, computePopoverPosition, containsBkTreeNode, deriveAppearance, flattenBkTreeData, getDialogBackdropAnimation, getDialogPanelAnimation, joinPlacement, moveBkTreeNode, normalizeBkTableSize, parseColor, splitPlacement };
-export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkCellAlign, BkColumnRef, BkColumnSelectPosition, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkFilterFn, BkFilterOption, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputSize, BkInputType, BkLoaderVariant, BkPageSize, BkPageSizeVisibility, BkSortDirection, BkSortFn, BkSortOrder, BkTableNoResult, BkTableQueryParams, BkTableScroll, BkTableSelection, BkTableSize, BkTableSizeToken, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, BkTreeDragScope, BkTreeDropEvent, BkTreeDropPosition, BkTreeRow, BreadcrumbItem, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuPopupSide, MenuSize, MenuSubmenuMode, MenuTrigger, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TableRows, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };
+export type { AvatarFallback, AvatarGroupItem, AvatarSize, AvatarVariant, BadgeColor, BadgeSize, BadgeVariant, BkAnimationKeyframes, BkAvatarFallback, BkAvatarSize, BkCellAlign, BkColumnRef, BkColumnSelectPosition, BkDialogAnimation, BkDialogConfig, BkDialogPosition, BkFilterFn, BkFilterOption, BkInputAutoCapitalize, BkInputAutoComplete, BkInputMode, BkInputSize, BkInputType, BkLoaderVariant, BkPageSize, BkPageSizeVisibility, BkSelectGridColumn, BkSortDirection, BkSortFn, BkSortOrder, BkTableNoResult, BkTableQueryParams, BkTableScroll, BkTableSelection, BkTableSize, BkTableSizeToken, BkTextAreaAutoCapitalize, BkTextAreaAutoComplete, BkTextAreaInputMode, BkTreeDragScope, BkTreeDropEvent, BkTreeDropPosition, BkTreeRow, BreadcrumbItem, ButtonSize, ButtonVariant, CalendarRange, ColorAppearance, ColorFill, CountryOption, CustomRangesConfig, DotPosition, DotStatus, DropdownItem, DropdownPlacement, DropdownSize, DropdownTrigger, DropdownVariant, FileState, GroupItem, GroupMode, HierarchicalNode, IconButtonSize, IconButtonVariant, IconOrientation, MenuItem, MenuOrientation, MenuPopupSide, MenuSize, MenuSubmenuMode, MenuTrigger, PillColor, PillSize, PillVariant, PopoverAlign, PopoverPlacement, PopoverPosition, PopoverPositionOptions, PopoverSide, Rect, ScheduledDateSelection, Size, SortDirection, SpinnerSize, TabIconDirection, TabItem, TableAction, TableBadge, TableColumn, TableIcon, TableRows, TabsColors, TabsOrientation, TabsVariant, TimeConfiguration, ToastConfig, ToastMessage, ToastMethodOptions, ToastPosition, ToastSeverity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brickclay-org/ui",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "schematics": "./schematics/collection.json",
   "ng-add": {
     "save": "dependencies"

package/src/lib/select/select.css

@@ -130,6 +130,12 @@
   max-width: 140px;
 }
 
+/* Grid selections may combine two column values, so allow wider chips without
+   changing the established list-mode multi-select sizing. */
+.bk-select-container.bk-grid-view .bk-multi-badge-item {
+  max-width: 175px;
+}
+
 .bk-multi-badge-item-text {
   @apply text-[10px] leading-[12px] font-normal text-[#6B7080];
   white-space: nowrap;
@@ -164,6 +170,144 @@
   @apply absolute left-0 w-full bg-white border border-[#E3E3E7] rounded-xl shadow-lg z-[100] overflow-hidden cursor-default p-2.5;
 }
 
+/* Opt-in grid dropdown. List-mode selectors above and below remain unchanged. */
+.bk-grid-scroll {
+  @apply overflow-auto -mx-2.5;
+  scrollbar-width: thin;
+  scrollbar-color: #D6D7DC transparent;
+}
+
+.bk-grid-scroll::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.bk-grid-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.bk-grid-scroll::-webkit-scrollbar-thumb {
+  background: #D6D7DC;
+  border-radius: 999px;
+}
+
+.bk-grid-scroll::-webkit-scrollbar-thumb:hover {
+  background: #909090;
+}
+
+.bk-grid-scroll::-webkit-scrollbar-button {
+  display: none;
+}
+
+/* Unlike list options, the grid header should meet the panel's top edge. */
+.bk-dropdown-panel.bk-grid-panel {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.bk-select-grid {
+  @apply w-full border-collapse text-sm text-[#141414];
+  table-layout: fixed;
+}
+
+.bk-select-grid th {
+  @apply sticky top-0 z-10 bg-[#F1F1F3] px-4 py-2.5 font-semibold whitespace-nowrap border-b border-[#E3E3E7];
+}
+
+.bk-select-grid td {
+  @apply px-4 py-2.5 border-b border-[#E3E3E7] align-middle;
+}
+
+.bk-select-grid tbody tr {
+  @apply cursor-pointer transition-colors;
+}
+
+.bk-select-grid tbody tr:hover,
+.bk-select-grid tbody tr.bk-marked {
+  @apply bg-[#F8F8F8];
+}
+
+.bk-select-grid tbody tr.bk-selected {
+  background-color: #F8F8F8;
+}
+
+.bk-select-grid tbody tr.bk-option-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+.bk-grid-checkbox-column {
+  width: 48px;
+  min-width: 48px;
+  @apply !px-4;
+}
+
+.bk-grid-cell-text {
+  @apply block truncate;
+}
+
+.bk-grid-message {
+  @apply !px-4 !py-4 text-center text-gray-400;
+}
+
+.bk-grid-footer {
+  @apply flex items-center justify-between gap-4 px-1 py-2.5 text-xs text-[#6B7080];
+}
+
+.bk-grid-footer-actions {
+  @apply flex items-center gap-2;
+}
+
+/* Grid density follows the select's existing `variation="sm"` contract. The
+   class lives on the panel so it keeps working when appendToBody relocates it. */
+.bk-dropdown-panel.bk-grid-compact {
+  padding: 0 0.5rem;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-dropdown-search {
+  @apply px-1 pt-1;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-search-wrapper {
+  @apply px-2 py-1;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-search-input {
+  @apply text-xs;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-grid-scroll {
+  @apply -mx-2;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-select-grid {
+  @apply text-xs;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-select-grid th,
+.bk-dropdown-panel.bk-grid-compact .bk-select-grid td {
+  @apply px-3 py-1.5;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-grid-checkbox-column {
+  width: 40px;
+  min-width: 40px;
+  @apply !px-3;
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-grid-footer {
+  @apply gap-3 px-0 py-1.5 text-[11px];
+}
+
+.bk-dropdown-panel.bk-grid-compact .bk-grid-footer-actions {
+  @apply gap-1.5;
+}
+
+@media (max-width: 640px) {
+  .bk-grid-scroll {
+    max-width: calc(100vw - 32px);
+  }
+}
+
 .bk-dropdown-search {
   @apply px-2 pt-2;
 }