Skip to content

feat: improve template and component responsiveness - #391

Merged
pkosiec merged 5 commits into
mainfrom
pkosiec/responsiveness
May 20, 2026
Merged

feat: improve template and component responsiveness#391
pkosiec merged 5 commits into
mainfrom
pkosiec/responsiveness

Conversation

@pkosiec

@pkosiecpkosiec commented May 19, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Summary

Audit and improve responsiveness across the AppKit template and appkit-ui components so that scaffolded apps are mobile-friendly out of the box.

What was fixed

Template (affects every databricks apps init app):

  • Mobile navigation: Added Sheet/drawer nav with hamburger menu on mobile (<768px), horizontal nav on desktop. Uses useIsMobile hook and Sheet component from appkit-ui.
  • Viewport-relative chat heights: Replaced fixed h-[600px] with h-[min(600px,70vh)] on AgentChat, GeniePage, and ServingPage — prevents clipping on short mobile viewports.
  • Files page stacking: Directory list + preview panel now stack vertically on mobile (flex-col md:flex-row). Toolbar wraps responsively.
  • Jobs page wrapping: Controls use flex-wrap and input uses w-full sm:w-48 so they don't overflow on narrow screens.
  • Responsive padding: Header and main content use px-4 sm:px-6 / p-4 sm:p-6.

appkit-ui:

  • DataTable pagination: Footer stacks on mobile (flex-col-reverse sm:flex-row) so controls don't squish together.
  • Chart label overlap: Added containLabel: true to cartesian chart grid config. This makes ECharts auto-size the grid to include rotated axis labels, preventing them from overlapping the bottom legend.
  • Export useIsMobile hook: Now exported from @databricks/appkit-ui/react for consumer use.

Tooling:

  • Fix generate-app-templates: Added missing genie.genie-space.name field for genie templates.

What was already responsive (no changes needed)

  • Charts (width): echarts-for-react auto-resizes width; height is consumer-configurable via prop.
  • Genie components: Well-structured flexbox layout with ScrollArea and ResizeObserver. Message bubbles use max-w-[80%] + break-words.
  • File browser components: DirectoryList, FileEntry, FilePreviewPanel already handle overflow and truncation.
  • shadcn/ui primitives: Dialog, Sheet, Drawer, Breadcrumb, Pagination, etc. all use Radix viewport-aware positioning and Tailwind responsive classes.

Screenshots

Screenshots taken from the generated appkit-all-in-one template using Chrome DevTools MCP.
desktop-analytics
desktop-files
desktop-genie
desktop-home
mobile-analytics
mobile-files
mobile-files-new-folder
mobile-genie-messages
mobile-home
mobile-nav-open
mobile-serving
mobile-serving
mobile-lakebase

Test plan

  • pnpm build passes
  • pnpm test passes (3 pre-existing telemetry test failures, unrelated)
  • pnpm -r typecheck passes
  • Generated appkit-all-in-one template with DATABRICKS_CLI=dbx pnpm generate:app-templates
  • Installed local SDK tarballs and ran dev server
  • Chrome DevTools MCP visual verification at 375px (mobile) and 1440px (desktop)
    • Mobile: hamburger nav with Sheet, viewport-relative heights, stacked Files, Genie message bubbles responsive
    • Desktop: horizontal nav, multi-column grids, side-by-side Files layout, charts with proper label spacing

@pkosiec
pkosiec marked this pull request as ready for review May 20, 2026 12:17
@pkosiec
pkosiec requested a review from a team as a code ownerMay 20, 2026 12:17
@pkosiec
pkosiec requested a review from calvarjorgeMay 20, 2026 12:17
pkosiec added 5 commits May 20, 2026 14:17
@pkosiec
feat: improve template and component responsiveness
a8fe201
- Add responsive mobile navigation with Sheet/drawer (hamburger menu on
mobile, horizontal nav on desktop) to the template shell
- Replace fixed h-[600px] with h-[min(600px,70vh)] on chat containers
(AgentChat, GeniePage, ServingPage) so they don't clip on short viewports
- Make FilesPage stack vertically on mobile with responsive toolbar
- Make JobsPage controls wrap on narrow screens
- Export useIsMobile hook from appkit-ui for consumer use
- Make DataTable pagination footer responsive (stacks on mobile)
- Fix generate-app-templates genie-space missing name field
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@pkosiec
fix: prevent chart x-axis label overlap with legend
32d6779
Add containLabel: true to ECharts grid config in all chart option
builders. This makes ECharts auto-size the grid to include rotated
axis labels, preventing them from overlapping the bottom legend.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@pkosiec
fix: prevent chart x-axis label overlap with legend
6faa9b9
Add containLabel: true to the cartesian chart grid config only.
When x-axis has >10 items, labels rotate 45deg and can extend into
the legend area. containLabel makes ECharts auto-size the grid to
include axis labels, preventing the overlap.
Only applied to buildCartesianOption (line/bar/area/scatter) where
rotated labels cause the issue. Horizontal bar and heatmap grids
are left unchanged — their label layouts don't have this problem.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@pkosiec
fix: remove redundant mt-4 from mobile nav links
52ba83d
SheetContent already provides gap-4 between its children,
so the extra mt-4 on NavLinks was doubling the spacing.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@pkosiec
fix: improve responsive nav pattern and breakpoint alignment
491af95
- Switch from JS-conditional to CSS-based nav visibility (hidden md:flex /
md:hidden) following the shadcn/ui Sidebar pattern, eliminating flash of
desktop nav on mobile first render
- Align responsive breakpoints to md: (768px) matching useIsMobile threshold,
fixing inconsistency where sm: padding (640px) and JS nav toggle (768px)
created a hybrid state between 640-767px
- Add useEffect to reset mobile Sheet state on viewport resize, preventing
the Sheet from auto-reopening after device rotation
- Add explicit NavLinkClassFn type alias for linkClass prop clarity
- Document flex-col-reverse intent in data-table pagination footer
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@pkosiec
pkosiecforce-pushed the pkosiec/responsiveness branch from 4fef957 to 491af95CompareMay 20, 2026 12:17
@pkosiec
pkosiec merged commit d451278 into mainMay 20, 2026
9 checks passed
@pkosiec
pkosiec deleted the pkosiec/responsiveness branch May 20, 2026 13:35
pkosiec added a commit that referenced this pull request May 21, 2026
@pkosiec
feat: improve template and component responsiveness (#391)
7d3e3f8
* feat: improve template and component responsiveness
- Add responsive mobile navigation with Sheet/drawer (hamburger menu on
mobile, horizontal nav on desktop) to the template shell
- Replace fixed h-[600px] with h-[min(600px,70vh)] on chat containers
(AgentChat, GeniePage, ServingPage) so they don't clip on short viewports
- Make FilesPage stack vertically on mobile with responsive toolbar
- Make JobsPage controls wrap on narrow screens
- Export useIsMobile hook from appkit-ui for consumer use
- Make DataTable pagination footer responsive (stacks on mobile)
- Fix generate-app-templates genie-space missing name field
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
* fix: prevent chart x-axis label overlap with legend
Add containLabel: true to ECharts grid config in all chart option
builders. This makes ECharts auto-size the grid to include rotated
axis labels, preventing them from overlapping the bottom legend.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
* fix: prevent chart x-axis label overlap with legend
Add containLabel: true to the cartesian chart grid config only.
When x-axis has >10 items, labels rotate 45deg and can extend into
the legend area. containLabel makes ECharts auto-size the grid to
include axis labels, preventing the overlap.
Only applied to buildCartesianOption (line/bar/area/scatter) where
rotated labels cause the issue. Horizontal bar and heatmap grids
are left unchanged — their label layouts don't have this problem.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
* fix: remove redundant mt-4 from mobile nav links
SheetContent already provides gap-4 between its children,
so the extra mt-4 on NavLinks was doubling the spacing.
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
* fix: improve responsive nav pattern and breakpoint alignment
- Switch from JS-conditional to CSS-based nav visibility (hidden md:flex /
md:hidden) following the shadcn/ui Sidebar pattern, eliminating flash of
desktop nav on mobile first render
- Align responsive breakpoints to md: (768px) matching useIsMobile threshold,
fixing inconsistency where sm: padding (640px) and JS nav toggle (768px)
created a hybrid state between 640-767px
- Add useEffect to reset mobile Sheet state on viewport resize, preventing
the Sheet from auto-reopening after device rotation
- Add explicit NavLinkClassFn type alias for linkClass prop clarity
- Document flex-col-reverse intent in data-table pagination footer
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
---------
Signed-off-by: Pawel Kosiec <pawel.kosiec@databricks.com>
@MarioCadenasMarioCadenas mentioned this pull request Aug 18, 2026
Merged
MarioCadenas added a commit that referenced this pull request Aug 18, 2026
@MarioCadenas
fix: template mobile-nav set-state-in-effect + lint-staged unmatched-…
3211de2
…pattern (#539)
* fix: keep lint-staged green when only oxc-ignored files are staged
oxlint/oxfmt exit non-zero on an all-ignored fileset ("No files found to
lint"), so any commit touching only files under template/, generated
outputs, etc. failed pre-commit. The former Biome command used
--no-errors-on-unmatched; restore that behavior with
--no-error-on-unmatched-pattern on the oxlint and oxfmt lint-staged steps.
Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
* fix: resolve react-hooks set-state-in-effect in scaffolded app mobile nav
The mobile-nav Sheet reset its open state inside a useEffect keyed on
isMobile, which eslint-plugin-react-hooks v7 flags as set-state-in-effect.
Derive the open prop instead (open={mobileNavOpen && isMobile}) so the
portaled Radix sheet can't linger on desktop, and drop the effect. Radix
fires onOpenChange(false) when open goes false, so state stays in sync.
Verified on a freshly scaffolded app: eslint clean, typecheck passes,
vite build succeeds. Latent since #391; CI never lints the template or a
scaffolded app, so it went unnoticed until a fresh scaffold was linted.
Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
---------
Signed-off-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
Co-authored-by: MarioCadenas <MarioCadenas@users.noreply.github.com>
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@atilafassinaatilafassinaatilafassina approved these changes
@calvarjorgecalvarjorgeAwaiting requested review from calvarjorgecalvarjorge is a code owner automatically assigned from databricks/eng-apps-devex-appkit

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@pkosiec@atilafassina