feat: improve template and component responsiveness#391
Merged
Conversation
- 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>
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>
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>
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>
- 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
force-pushed
the
pkosiec/responsiveness
branch
from
4fef957 to
491af95
Compare
atilafassina
approved these changes
May 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Audit and improve responsiveness across the AppKit template and
appkit-uicomponents so that scaffolded apps are mobile-friendly out of the box.What was fixed
Template (affects every
databricks apps initapp):useIsMobilehook andSheetcomponent from appkit-ui.h-[600px]withh-[min(600px,70vh)]on AgentChat, GeniePage, and ServingPage — prevents clipping on short mobile viewports.flex-col md:flex-row). Toolbar wraps responsively.flex-wrapand input usesw-full sm:w-48so they don't overflow on narrow screens.px-4 sm:px-6/p-4 sm:p-6.appkit-ui:
flex-col-reverse sm:flex-row) so controls don't squish together.containLabel: trueto cartesian chart grid config. This makes ECharts auto-size the grid to include rotated axis labels, preventing them from overlapping the bottom legend.useIsMobilehook: Now exported from@databricks/appkit-ui/reactfor consumer use.Tooling:
generate-app-templates: Added missinggenie.genie-space.namefield for genie templates.What was already responsive (no changes needed)
echarts-for-reactauto-resizes width; height is consumer-configurable via prop.max-w-[80%]+break-words.Screenshots
Screenshots taken from the generated
appkit-all-in-onetemplate using Chrome DevTools MCP.Test plan
pnpm buildpassespnpm testpasses (3 pre-existing telemetry test failures, unrelated)pnpm -r typecheckpassesappkit-all-in-onetemplate withDATABRICKS_CLI=dbx pnpm generate:app-templates