feat(ui/dashboard): implement mobile responsive by steveninhle · Pull Request #2478 · bucketeer-io/bucketeer

steveninhle · 2026-03-25T01:52:24Z

Summary

Implement full mobile-responsive layout across all major dashboard pages, including feature flags, experiments, audit log, debugger, goals, members, user segments, organizations, projects, notifications, and pushes
Add mobile card components for all entity types with a new card collection layout that switches between table and card views based on screen size
Refactor filter modals to support slide (drawer) and popup variants for mobile and desktop, respectively, with extracted logic hooks for each filter
Refactor shared UI components (dropdown, filters) to support both mobile and desktop interactions
Add new i18n keys to support mobile UI strings

Test plan

Verify all list pages (feature flags, experiments, members, segments, orgs, projects, notifications, pushes) render correctly on mobile viewport (< 600px)
Verify filter modals open as slide drawers on mobile and popups on desktop
Verify card collection layout displays entity cards on mobile and data table on desktop
Verify navigation animation and mobile navigation work correctly
Verify the auth page is responsive on small screens
Verify sort-by functionality works on mobile views
Verify create-flag and experiment/goal detail pages are usable on mobile

Copilot

Pull request overview

Implements a comprehensive mobile-responsive experience across the Bucketeer dashboard UI by adding mobile-first layouts (cards/drawers), tightening spacing/overflow behavior, and refactoring shared controls (filters, sort, dropdowns) to work consistently on small screens.

Changes:

Adds mobile card-collection layouts for multiple list pages, switching between table and cards based on screen size.
Refactors filter/sort interactions (slide drawers on mobile, popups on desktop) and updates shared UI primitives (dropdowns, pagination, layout containers).
Updates page headers/layout spacing and introduces new i18n keys and icons to support the new mobile UI.

Reviewed changes

Copilot reviewed 250 out of 252 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
ui/dashboard/tailwind.config.ts	Adds new shadows/animations used by responsive UI.
ui/dashboard/src/pages/user-segments/user-segment-modal/flags-connected-modal/index.tsx	Makes modal content responsive (max-width + padding).
ui/dashboard/src/pages/user-segments/user-segment-modal/filter-segment-modal/use-filter-segment-logic.tsx	Adds extracted filter logic hook for user-segments modal.
ui/dashboard/src/pages/user-segments/user-segment-modal/delete-segment-modal/index.tsx	Uses responsive modal sizing.
ui/dashboard/src/pages/user-segments/page-content.tsx	Adds mobile sort UI and uploading status helper for lists/cards.
ui/dashboard/src/pages/user-segments/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/user-segments/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/user-segments/collection-layout/data-collection.tsx	Adjusts table column sizing and refactors uploading status handling.
ui/dashboard/src/pages/user-segments/collection-layout/card-collection.tsx	Adds mobile card list rendering for user segments.
ui/dashboard/src/pages/signin/organization.tsx	Improves responsive dropdown sizing and replaces console logging with toast error.
ui/dashboard/src/pages/signin/elements/auth-wrapper.tsx	Hides right-side panel on small screens and adjusts padding.
ui/dashboard/src/pages/settings/page-content.tsx	Reduces padding on mobile.
ui/dashboard/src/pages/pushes/page-content.tsx	Adds mobile sort UI.
ui/dashboard/src/pages/pushes/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/pushes/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/pushes/collection-layout/data-collection.tsx	Adjusts column widths for smaller screens.
ui/dashboard/src/pages/pushes/collection-layout/card-collection.tsx	Adds mobile card list rendering for pushes.
ui/dashboard/src/pages/projects/project-modal/filter-project-modal/use-filter-project-logic.tsx	Adds extracted filter logic hook for projects.
ui/dashboard/src/pages/projects/project-modal/filter-project-modal/slide-filter.tsx	Adds mobile slide/drawer filter UI for projects.
ui/dashboard/src/pages/projects/project-modal/filter-project-modal/popup-filter.tsx	Adds desktop popup filter UI for projects.
ui/dashboard/src/pages/projects/page-content.tsx	Adds mobile sort UI and fixes callback dependencies.
ui/dashboard/src/pages/projects/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/projects/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection; fetches accounts for cards.
ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx	Refactors columns to accept accounts/environment from caller.
ui/dashboard/src/pages/projects/collection-layout/card-collection.tsx	Adds mobile card list rendering for projects.
ui/dashboard/src/pages/project-details/settings/index.tsx	Makes settings page spacing/layout responsive.
ui/dashboard/src/pages/project-details/page-content.tsx	Adjusts tab list padding for mobile.
ui/dashboard/src/pages/project-details/environments/page-content.tsx	Improves responsive spacing and scroll behavior.
ui/dashboard/src/pages/project-details/environments/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/project-details/environments/collection-layout/card-collection.tsx	Adds mobile card list rendering for environments.
ui/dashboard/src/pages/organizations/page-content.tsx	Adds mobile sort UI and adjusts tab spacing/padding.
ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/use-filter-organization-logic.tsx	Adds extracted filter logic hook for organizations.
ui/dashboard/src/pages/organizations/organization-modal/filter-organization-modal/popup-filter.tsx	Adds desktop popup filter UI for organizations.
ui/dashboard/src/pages/organizations/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/organizations/collection-layout/data-collection.tsx	Adjusts column widths for smaller screens.
ui/dashboard/src/pages/organizations/collection-layout/card-collection.tsx	Adds mobile card list rendering for organizations.
ui/dashboard/src/pages/organization-details/settings/index.tsx	Reduces horizontal padding on mobile.
ui/dashboard/src/pages/organization-details/page-content.tsx	Adjusts tab list padding for mobile.
ui/dashboard/src/pages/organization-details/members/collection-loader/index.tsx	Switches between DataTable and existing members CardCollection on mobile.
ui/dashboard/src/pages/notifications/page-content.tsx	Adds mobile sort UI.
ui/dashboard/src/pages/notifications/notification-modal/notification-create-update-modal/index.tsx	Expands dropdown behavior for mobile.
ui/dashboard/src/pages/notifications/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/notifications/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/notifications/collection-layout/data-collection.tsx	Adjusts column widths for smaller screens.
ui/dashboard/src/pages/notifications/collection-layout/card-collection.tsx	Adds mobile card list rendering for notifications.
ui/dashboard/src/pages/members/page-content.tsx	Adds mobile sort UI and fixes callback behavior/deps.
ui/dashboard/src/pages/members/member-modal/delete-member-modal/index.tsx	Makes delete modal responsive.
ui/dashboard/src/pages/members/member-modal/add-member-modal/index.tsx	Expands dropdowns and improves responsive widths.
ui/dashboard/src/pages/members/member-modal/add-member-modal/environment-roles.tsx	Expands dropdown for mobile.
ui/dashboard/src/pages/members/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/members/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/members/collection-layout/data-collection.tsx	Adjusts column sizing and min-widths for mobile.
ui/dashboard/src/pages/members/collection-layout/card-collection.tsx	Adds mobile card list rendering for members.
ui/dashboard/src/pages/insights/elements/LegendTable/index.tsx	Improves responsive height/min-width behavior.
ui/dashboard/src/pages/insights/elements/DateCustom/index.tsx	Makes date picker layout vertical on mobile.
ui/dashboard/src/pages/insights/elements/chart-utils.tsx	Scales typography/padding for smaller screens.
ui/dashboard/src/pages/goals/page-content.tsx	Adjusts tabs spacing/padding for mobile.
ui/dashboard/src/pages/goals/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/goals/goals-modal/connections-modal/index.tsx	Makes connections modal responsive.
ui/dashboard/src/pages/goals/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/goals/collection-layout/data-collection.tsx	Refactors tag display and improves truncation on mobile.
ui/dashboard/src/pages/goals/collection-layout/card-collection.tsx	Adds mobile card list rendering for goals.
ui/dashboard/src/pages/goal-details/page-content.tsx	Reduces padding on mobile.
ui/dashboard/src/pages/goal-details/elements/goal-connections.tsx	Removes fixed min-width to allow mobile layout.
ui/dashboard/src/pages/goal-details/elements/delete-goal-modal.tsx	Makes modal responsive and icon size adaptive.
ui/dashboard/src/pages/feature-flags/sort-by/index.tsx	Generalizes SortBy component to accept options via props.
ui/dashboard/src/pages/feature-flags/page-loader.tsx	Makes confirm modal content responsive.
ui/dashboard/src/pages/feature-flags/page-content.tsx	Uses shared SortBy and adjusts tabs spacing for mobile.
ui/dashboard/src/pages/feature-flags/overview/index.tsx	Makes overview cards horizontally scrollable on mobile.
ui/dashboard/src/pages/feature-flags/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/feature-flags/flags-modal/clone-flag-modal/index.tsx	Fixes dropdown widths for mobile.
ui/dashboard/src/pages/feature-flags/flags-modal/archive-modal/index.tsx	Makes archive modal sizing more flexible.
ui/dashboard/src/pages/feature-flags/collection-layout/elements/index.tsx	Makes grid rows responsive (2-row on mobile).
ui/dashboard/src/pages/feature-flags/collection-layout/card-collection.tsx	Adds mobile card list rendering for feature flags.
ui/dashboard/src/pages/feature-flag-details/variation/submit-bar.tsx	Stacks controls on mobile; improves button sizing.
ui/dashboard/src/pages/feature-flag-details/variation/index.tsx	Removes fixed min-widths; improves responsive messaging.
ui/dashboard/src/pages/feature-flag-details/trigger/trigger-section/trigger-item.tsx	Makes trigger items wrap/stack on small screens.
ui/dashboard/src/pages/feature-flag-details/trigger/trigger-section/index.tsx	Tweaks trigger description layout for mobile.
ui/dashboard/src/pages/feature-flag-details/trigger/index.tsx	Removes fixed min-width to allow mobile layout.
ui/dashboard/src/pages/feature-flag-details/trigger/create-trigger-form/index.tsx	Adds responsive dropdown content width.
ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/strategy.tsx	Improves wrapping/min-width behavior in targeting UI.
ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/rule.tsx	Makes rule builder layout responsive; expands dropdowns.
ui/dashboard/src/pages/feature-flag-details/targeting/segment-rule/audience-select.tsx	Adjusts padding for mobile.
ui/dashboard/src/pages/feature-flag-details/targeting/individual-rule/index.tsx	Fixes safe access and truncation/min-width on mobile.
ui/dashboard/src/pages/feature-flag-details/targeting/index.tsx	Removes fixed min-width; fixes prop naming typo.
ui/dashboard/src/pages/feature-flag-details/targeting/flag-switch/index.tsx	Stacks switch + dropdown on mobile; improves dropdown width.
ui/dashboard/src/pages/feature-flag-details/targeting/flag-off-description/index.tsx	Simplifies layout for mobile and improves text styling.
ui/dashboard/src/pages/feature-flag-details/targeting/default-rule/index.tsx	Adjusts rollout warning layout for mobile.
ui/dashboard/src/pages/feature-flag-details/settings/general-info-form/index.tsx	Makes docs button spacing and dropdown expansion responsive.
ui/dashboard/src/pages/feature-flag-details/page-content.tsx	Makes tabs horizontally scrollable on mobile.
ui/dashboard/src/pages/feature-flag-details/operations/index.tsx	Makes operations header/tabs/layout responsive.
ui/dashboard/src/pages/feature-flag-details/operations/elements/overview/index.tsx	Adjusts padding for mobile.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-status/index.tsx	Scales typography for small screens.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-progress/rollout-progress/index.tsx	Adds horizontal scrolling for wide rollout progress content.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-modals/event-rate/index.tsx	Stacks form fields on mobile.
ui/dashboard/src/pages/feature-flag-details/operations/elements/operation-actions.tsx	Reduces padding on mobile.
ui/dashboard/src/pages/feature-flag-details/operations/elements/collection-layout/empty-collection.tsx	Improves empty state spacing on mobile.
ui/dashboard/src/pages/feature-flag-details/history/index.tsx	Makes date picker vertical on mobile and tweaks action layout.
ui/dashboard/src/pages/feature-flag-details/history/collection-loader/index.tsx	Reduces horizontal padding on mobile.
ui/dashboard/src/pages/feature-flag-details/evaluation/index.tsx	Improves chart/table scroll behavior on mobile; fixes label selection.
ui/dashboard/src/pages/feature-flag-details/evaluation/filter-bar/index.tsx	Wraps filter bar and hides docs button on mobile.
ui/dashboard/src/pages/feature-flag-details/evaluation/evaluation-table/index.tsx	Adjusts responsive column widths and truncation.
ui/dashboard/src/pages/feature-flag-details/evaluation/evaluation-chart/index.tsx	Minor formatting cleanup.
ui/dashboard/src/pages/feature-flag-details/elements/discard-change-items.tsx	Prevents overflow and scales typography on mobile.
ui/dashboard/src/pages/feature-flag-details/elements/card.tsx	Adjusts padding/min-width for mobile.
ui/dashboard/src/pages/feature-flag-details/code-refs/index.tsx	Removes fixed min-width to allow mobile layout.
ui/dashboard/src/pages/experiments/page-content.tsx	Adds mobile sort UI and responsive tab spacing.
ui/dashboard/src/pages/experiments/overview/index.tsx	Makes overview cards horizontally scrollable on mobile.
ui/dashboard/src/pages/experiments/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/experiments/experiments-modal/goals-connection-modal/index.tsx	Makes modal responsive; adjusts typography/icon sizing.
ui/dashboard/src/pages/experiments/experiments-modal/experiment-create-update/index.tsx	Expands dropdowns and improves responsive dropdown widths.
ui/dashboard/src/pages/experiments/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/experiments/collection-layout/data-collection.tsx	Adjusts name column sizing and z-index for overlays.
ui/dashboard/src/pages/experiments/collection-layout/card-collection.tsx	Adds mobile card list rendering for experiments.
ui/dashboard/src/pages/experiment-details/page-content.tsx	Reduces padding on mobile.
ui/dashboard/src/pages/experiment-details/collection-loader/settings/experiment-state/index.tsx	Makes experiment state bar wrap/stack on mobile.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/timeseries-line-chart.tsx	Removes fixed min-width and adjusts padding for mobile.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/timeseries-area-line-chart.tsx	Removes fixed min-width and adjusts padding for mobile.
ui/dashboard/src/pages/experiment-details/collection-loader/results/goal-results/index.tsx	Adjusts card padding/spacing for mobile.
ui/dashboard/src/pages/debugger/debugger-results/result-list/result-item.tsx	Adds mobile card rendering for results and improves table overflow.
ui/dashboard/src/pages/debugger/debugger-results/result-list/result-item-card.tsx	Adds mobile result card UI.
ui/dashboard/src/pages/debugger/debugger-results/result-list/data-collection.tsx	Adjusts columns for smaller screens.
ui/dashboard/src/pages/debugger/debugger-results/action-bar.tsx	Wraps action bar controls on mobile.
ui/dashboard/src/pages/create-flag/page-content.tsx	Removes fixed min-width and reduces padding on mobile.
ui/dashboard/src/pages/create-flag/flag-form/general-info.tsx	Stacks fields on mobile.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/variations.tsx	Adds mobile delete button placement and responsive field layout.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/index.tsx	Reduces vertical gaps on mobile.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/flag-type.tsx	Minor spacing cleanup.
ui/dashboard/src/pages/create-flag/flag-form/flag-variations/default-variations.tsx	Stacks default variation selectors on mobile.
ui/dashboard/src/pages/audit-logs/page-content.tsx	Makes date range picker vertical on mobile; adjusts filter layout.
ui/dashboard/src/pages/audit-logs/index.tsx	Conditionally hides documentation link based on screen size.
ui/dashboard/src/pages/audit-logs/collection-loader/index.tsx	Reduces horizontal padding on mobile.
ui/dashboard/src/pages/audit-logs/collection-layout/audit-log-list.tsx	Reduces gaps on mobile.
ui/dashboard/src/pages/audit-logs/collection-layout/audit-log-item.tsx	Improves inline/flex behavior for mobile layouts.
ui/dashboard/src/pages/api-keys/page-content.tsx	Adds mobile sort UI.
ui/dashboard/src/pages/api-keys/index.tsx	Adds documentation link to header.
ui/dashboard/src/pages/api-keys/collection-loader/index.tsx	Switches between DataTable and mobile CardCollection.
ui/dashboard/src/pages/api-keys/collection-layout/data-collection.tsx	Adjusts column sizing and simplifies role helper.
ui/dashboard/src/pages/api-keys/collection-layout/card-collection.tsx	Adds mobile card list rendering for API keys.
ui/dashboard/src/pages/access-denied/index.tsx	Reduces padding on mobile.
ui/dashboard/src/hooks/use-unsaved-leave-page.tsx	Makes confirm modal responsive; adjusts overlay z-index.
ui/dashboard/src/hooks/use-screen.ts	Updates responsive breakpoints and adds `isMobile`.
ui/dashboard/src/elements/variation-label/index.tsx	Uses new truncation-with-tooltip helper for responsive labels.
ui/dashboard/src/elements/truncate-with-tooltip/index.tsx	Adds a reusable truncation + tooltip helper element.
ui/dashboard/src/elements/table-list-content/index.tsx	Removes global min-width to allow mobile layouts.
ui/dashboard/src/elements/table-list-container/index.tsx	Adjusts padding and overflow behavior for responsive pages.
ui/dashboard/src/elements/sort-by/index.tsx	Adds shared SortBy control for list pages.
ui/dashboard/src/elements/page-layout/index.tsx	Reduces header/content padding on mobile.
ui/dashboard/src/elements/page-header/index.tsx	Adds optional documentation link rendering on mobile.
ui/dashboard/src/elements/page-details-header/index.tsx	Moves support popover for mobile; adjusts layout.
ui/dashboard/src/elements/page-details-header/header-details-id/index.tsx	Adjusts ID padding for mobile.
ui/dashboard/src/elements/overview-card/index.tsx	Reduces padding on mobile.
ui/dashboard/src/elements/name-with-tooltip/index.tsx	Adjusts trigger positioning for responsive layouts.
ui/dashboard/src/elements/filter/index.tsx	Improves responsive filter bar layout and adds `actionClassName`.
ui/dashboard/src/elements/expandable-tag/index.tsx	Improves wrapping and reduces tooltip z-index.
ui/dashboard/src/elements/environment-editor-list/index.tsx	Expands dropdown behavior for mobile.
ui/dashboard/src/elements/dropdown-with-search/index.tsx	Fixes focus timer logic and makes content width responsive.
ui/dashboard/src/elements/dropdown-list/index.tsx	Improves dropdown option typing for dynamic selected fields.
ui/dashboard/src/elements/confirm-modal/index.tsx	Makes confirm modal responsive (max-width).
ui/dashboard/src/components/tabs-link/index.tsx	Reduces top margin on mobile.
ui/dashboard/src/components/table/index.tsx	Uses fixed table layout and enforces cell min-height.
ui/dashboard/src/components/pagination/pagination-actions.tsx	Reduces visible buttons on mobile and centers layout.
ui/dashboard/src/components/pagination/index.tsx	Stacks pagination on mobile and scrolls to top on page change.
ui/dashboard/src/components/navigation/my-projects.tsx	Improves mobile navigation popover sizing and collapsed sidebar behavior.
ui/dashboard/src/components/navigation/menu-section.tsx	Hides section titles when sidebar is collapsed.
ui/dashboard/src/components/navigation/menu-item.tsx	Hides labels when sidebar is collapsed.
ui/dashboard/src/components/modal/slide.tsx	Blocks outside interactions by default and fixes close handling.
ui/dashboard/src/components/modal/dialog.tsx	Blocks outside interactions by default, improves sizing/z-index, and responsive title typography.
ui/dashboard/src/components/mobile-card/elements/index.tsx	Adds shared mobile card primitives (header/meta/footer).
ui/dashboard/src/components/input/index.tsx	Adjusts input sizing/typography on mobile.
ui/dashboard/src/components/dropdown/types.ts	Extracts dropdown option/value types.
ui/dashboard/src/components/dropdown/search.tsx	Adds shared dropdown search input element.
ui/dashboard/src/components/dropdown/options-list.tsx	Adds shared dropdown options renderer (virtual vs normal).
ui/dashboard/src/components/dropdown/content.tsx	Adds shared dropdown content wrapper.
ui/dashboard/src/components/date-time-picker/custom-datepicker.css	Adds mobile styles for date-time picker layout.
ui/dashboard/src/components/date-range-picker/customize-navigator.tsx	Adds mobile static-range selection dropdown.
ui/dashboard/src/components/date-range-picker/customize-date-range-picker.css	Adds mobile styles and hides static ranges on small screens.
ui/dashboard/src/components/creatable-select/index.tsx	Adjusts react-select styles dynamically for mobile.
ui/dashboard/src/components/code-editor/style.css	Adds a class for iPad keyboard handling.
ui/dashboard/src/components/code-editor/index.tsx	Tightens Monaco options typing via `as const`.
ui/dashboard/src/components/code-editor/code-editor-mode.tsx	Makes code editor modal full-screen on mobile.
ui/dashboard/src/components/button/index.tsx	Caps button height on mobile.
ui/dashboard/src/@locales/ja/common.json	Adds i18n strings needed for mobile UI.
ui/dashboard/src/@locales/en/common.json	Adds i18n strings needed for mobile UI.
ui/dashboard/src/@icons/index.tsx	Exports new menu icon.
ui/dashboard/src/@icons/customized-icons/menu.svg	Adds menu SVG used in responsive navigation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 250 out of 252 changed files in this pull request and generated 4 comments.

Copilot

Pull request overview

Copilot reviewed 250 out of 252 changed files in this pull request and generated 7 comments.

Comments suppressed due to low confidence (1)

ui/dashboard/src/pages/projects/collection-layout/data-collection.tsx:40

handleGetCurrentAccount closes over currentEnvironment.organizationId but it isn’t included in the useCallback dependency list. If the current environment changes while this hook is mounted, the callback can keep using the previous organizationId and return wrong account info.

…screen

Copilot

Pull request overview

Copilot reviewed 268 out of 270 changed files in this pull request and generated 9 comments.

Suppressed comments (1)

ui/dashboard/src/hooks/use-walkthrough.tsx:353

The no-welcome path has the same mount-order problem: this dispatch only queues the drawer render, while driverRef.current.drive() runs synchronously below and looks up the still-unmounted mobile menu target. Start the driver only after the drawer render has committed (for example, in the next animation frame or from an effect that observes the open state).

+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-[300] min-w-[196px] max-h-[252px] overflow-x-hidden overflow-y-auto rounded-lg border bg-white p-1 shadow-dropdown small-scroll',


        const { id, name } = experiment;
        return (
-          <div className="flex flex-col gap-0.5">
+          <div className="flex flex-col gap-0.5 relative z-[999]">


+          onNextClick: (_element, _step, { driver: driverInstance }) => {
+            setMobileMenuOpen(true);
+            driverInstance.moveNext();
+          }


+    <PageLayout.Content className="gap-y-3 sm:gap-y-6">
      <Filter
        link={DOCUMENTATION_LINKS.AUDIT_LOGS}
+        isShowDocumentation={fromTabletScreen}


+  "time-stop": "Time stop",
+  "time-start": "Time start"


+                        isExpand
                        contentClassName="min-w-[500px]"


+        <span
+          className={cn(isExpanded ? 'inline-block' : 'hidden md:inline-block')}
+        >
+          {label}
+        </span>


+            <DropdownMenuItem
+              key={opt.value}
+              value={opt.value}
+              label={opt.label}
+              icon={opt.icon}
+              description={opt.description}
+              iconElement={opt.iconElement}
+              additionalElement={
+                additionalElement ? additionalElement(opt) : undefined
+              }
+              isSelectedItem={value === opt.value}
+              onSelectOption={val => onChange?.(val)}
+              className={itemClassName}
+            />


                color="primary-500"
              />
-              {t(isExpandAll ? 'collapse-all' : 'expand-all')}
+              {!isMobile && t(isExpandAll ? 'collapse-all' : 'expand-all')}


steveninhle force-pushed the feat-implement-mobile-responsive branch 2 times, most recently from 32ab221 to f71e6b9 Compare March 30, 2026 10:14

steveninhle force-pushed the feat-implement-mobile-responsive branch from f71e6b9 to edc783c Compare April 10, 2026 09:29

steveninhle force-pushed the feat-implement-mobile-responsive branch 4 times, most recently from e2afba5 to 252e8d2 Compare May 5, 2026 02:18

steveninhle force-pushed the feat-implement-mobile-responsive branch 4 times, most recently from f100b80 to a401a6d Compare June 12, 2026 07:06

steveninhle marked this pull request as ready for review June 12, 2026 07:11

steveninhle requested review from cre8ivejp, hvn2k1 and t-kikuc as code owners June 12, 2026 07:11

steveninhle force-pushed the feat-implement-mobile-responsive branch 2 times, most recently from e1f94dc to ad3c332 Compare June 17, 2026 02:13

cre8ivejp requested a review from Copilot June 17, 2026 03:16

Copilot started reviewing on behalf of cre8ivejp June 17, 2026 03:17 View session

Copilot AI reviewed Jun 17, 2026

View reviewed changes

steveninhle force-pushed the feat-implement-mobile-responsive branch 2 times, most recently from f60097e to 2c19f47 Compare June 17, 2026 07:57

cre8ivejp requested a review from Copilot June 18, 2026 03:49

Copilot started reviewing on behalf of cre8ivejp June 18, 2026 03:50 View session

Copilot AI reviewed Jun 18, 2026

View reviewed changes

Comment thread ui/dashboard/src/hooks/use-screen.ts Outdated

Comment thread ui/dashboard/src/components/modal/dialog.tsx

Comment thread ui/dashboard/src/components/pagination/index.tsx

Comment thread ui/dashboard/src/elements/truncate-with-tooltip/index.tsx

steveninhle force-pushed the feat-implement-mobile-responsive branch 2 times, most recently from 0b66b0a to e4a4ea1 Compare June 18, 2026 08:20

cre8ivejp requested a review from Copilot June 19, 2026 05:23

Copilot started reviewing on behalf of cre8ivejp June 19, 2026 05:23 View session

Copilot AI reviewed Jun 19, 2026

View reviewed changes

steveninhle added 26 commits August 24, 2026 15:00

feat(ui): mobile-responsive layout and naviagtion

081275f

feat(ui): refactor filters with slide and popup variants

88ac9c1

feat(ui): add card collection layout for mobile list views

73910c8

feat(ui): mobile-responsive feature flag details

ae6cf83

feat(ui): mobile-responsive experiment details

7c1dc60

feat(ui): mobile-responsive organization-detail

2b342e8

feat(ui): mobile-responsive debugger

48a0597

feat(ui): mobile-responsive feature-flags

3c93567

feat(ui): mobile-responsive project-details and goal-details

528b965

feat(ui): mobile-responsive experiments and audit-log

6047d54

feat(ui): mobile-responsive create-flag

8f66cb2

feat(ui): mobile-responsive goals, members, user-segments modal

509b7c2

feat(ui): add sort-by for mobile-repsonsive

58b68bd

feat(ui): mobile-responsive auth page

dbc3088

chore(ui): add animation for navigation

4a707f9

chore(ui):change icon menu and improve mobile card

aee4295

chore(ui): improvement option dopdown for all page

6d29f80

feat(ui): implement responsive mobile insight page

f84d5a0

chore: improve ui responsive mobile for pages

ad8faef

chore: implement ui for Date picker and Date range picker for mobile …

e595f22

…screen

chore(ui): refactor filter modals across pages for mobile support

f36d33b

fix(ui): navigation ui

c9a4690

chore(ui): update flag detail for mobile screen

41841a2

feat(ui): support walkthrough on mobile nav drawer

129e6e7

feat: implement responsive for segment rule

11f3a9a

feat(ui): mobile-responsive notification admin page

e47aac6

steveninhle force-pushed the feat-implement-mobile-responsive branch from 3b8efcb to e47aac6 Compare August 25, 2026 03:04

t-kikuc requested a balanced review from Copilot August 28, 2026 07:24

Copilot started reviewing on behalf of t-kikuc August 28, 2026 07:25 View session

Copilot AI reviewed Aug 28, 2026

View reviewed changes

Uh oh!

Conversation

steveninhle commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

steveninhle commented Mar 25, 2026 •

edited

Loading