feat: replace all Dialog usage with Revola for responsive behavior (Responsive Dialog)
#208
Conversation
…nd improve className organization
… responsiveness and UI consistency
…sktop dialog handling
… for improved UI consistency and responsiveness
…nt for improved UI consistency and responsiveness
…omponent for improved UI consistency and responsiveness. - Use `Scrollarea` for cleaner scrollbar and structure it a bit different, so scrollbar's doesn't overflow beyond dialog.
…ponent for improved UI consistency and responsiveness
…lder component for improved UI consistency and responsiveness
…mponent for improved UI consistency and responsiveness
…TabsTrigger, TabsContent, and TabsIndicator for improved UI navigation
…ponent for improved UI consistency and responsiveness
…t for improved UI consistency and responsiveness
… for improved UI consistency and responsiveness - Replace `Tabs` component with new Base UI based `Tabs` component
… UI consistency - Replace old Tabs component with new Base UI based Tabs component - Add TabsIndicator for enhanced visual feedback - Adjust SelectContent z-index for better layering
…ponent for improved UI consistency and responsiveness - fix: accessibility issue cased by missing title and description for dialog
…ponent for improved UI consistency and responsiveness - Disable `Issues` button, when there's no issue - Sticky Header for each section for better messaging for each section especially on mobile
…ure/revola-refactor
… visual consistency - Update margin and padding for better alignment of elements - Remove unnecessary line breaks to streamline the code
…mponents for improved visual consistency - Update positioning of elements in GetProDialog for better alignment - Remove unnecessary inset from AIChatDemo for cleaner layout
- Adjust max-height for better display on smaller screens - Maintain overall visual consistency with other dialog components
…ions - Add horizontal and vertical ScrollBars for improved navigation within code panels - Adjust padding in CodePanelDialog for better spacing and visual consistency
|
@SameerJS6 is attempting to deploy a commit to the tweakcn OSS program Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughRefactors numerous dialog usages to a new responsive dialog system and introduces a base tabs module. Updates dialog imports, component structures, classes, and some layout/scroll behavior. Adds a media-query hook and a new dependency for base tabs. No core logic or public signatures were changed except one function export. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ResponsiveDialog as RD
participant useMediaQuery as MQ
participant DialogOrDrawer as D/D
User->>RD: open/trigger dialog
RD->>MQ: evaluate query (isMobile?)
MQ-->>RD: returns boolean
RD->>D/D: render dialog (desktop) or drawer (mobile)
D/D-->>User: present UI
User->>D/D: interact (close/submit)
D/D->>RD: onOpenChange / callbacks
RD-->>User: update state / dismiss UI
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Possibly related PRs
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. 📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🔭 Outside diff range comments (1)
next.config.ts (1)
3-19: Fix syntax in next.config.ts: close the '*.svg' rule and verify theaspropertyThe
'*.svg'rule is missing its closing brace before theas: '*.js'token, which will cause a compile‐time syntax error ints-node/next build. You should:
- Close the
'*.svg'rule immediately after theloadersarray.- Move (or remove) the
as: '*.js'property into its own rule (or drop it if unneeded).Example minimal diff:
'*.svg': { loaders: [ { loader: '@svgr/webpack', options: { icon: true }, }, ], - as: '*.js', + }, // 🚩 close the '*.svg' rule + '*.js': { // ← only if you actually need an '*.js' rule + as: '*.js', + },Please confirm the intended Turbopack rule structure—if you don’t need a separate
*.jsrule, simply remove theas: '*.js'line.
🧹 Nitpick comments (4)
components/ui/button.tsx (1)
10-10: Consider keepingfocus-visiblefor better accessibility.The change from
focus-visible:outline-nonetofocus:outline-nonemay impact keyboard navigation accessibility.focus-visibleis generally preferred as it only applies focus styles when using keyboard navigation, not mouse clicks.Consider reverting this part of the change:
-"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", +"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",components/ui/base-ui-tabs.tsx (1)
37-44: Remove commented-out code and unused content.The commented code and the empty object at lines 39-44 should be removed as they serve no purpose in the final implementation.
-// "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-secondary data-[state=active]:text-secondary-foreground hover:text-muted-foreground/70 inline-flex items-center justify-center rounded-full px-3 py-1 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", - -{ - /* <Tabs.Tab - className="flex h-8 items-center justify-center border-0 px-2 text-sm font-medium break-keep whitespace-nowrap text-gray-600 outline-none select-none before:inset-x-0 before:inset-y-1 before:rounded-sm before:-outline-offset-1 before:outline-blue-800 hover:text-gray-900 focus-visible:relative focus-visible:before:absolute focus-visible:before:outline focus-visible:before:outline-2 data-[selected]:text-gray-900" - value="overview" - ></Tabs.Tab> */ -}components/figma-export-dialog.tsx (1)
71-184: Consider extracting large content sections for better maintainability.While the conversion is functionally correct, this component contains a lot of inline content that makes it difficult to maintain. Consider extracting the content sections into separate components or constants.
Example refactor approach:
// Extract content to separate components const FigmaHeroSection = () => ( <div className="space-y-6 text-center"> {/* hero content */} </div> ); const FigmaHowItWorksSection = ({ steps }: { steps: any[] }) => ( <div className="space-y-4"> {/* how it works content */} </div> );components/ui/revola.tsx (1)
50-58: Add error boundary recommendation.Consider wrapping this context usage in an error boundary since it throws an error when used outside the provider, which could crash the entire component tree.
Consider implementing a more graceful fallback:
export const useResponsiveDialog = () => { const context = React.useContext(ResponsiveDialogContext); if (!context) { console.warn("useResponsiveDialog used outside ResponsiveDialog provider"); return { modal: true, dismissible: true, direction: "bottom" as const }; } return context; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (21)
app/(auth)/components/auth-dialog.tsx(2 hunks)components/editor/action-bar/components/mcp-dialog.tsx(3 hunks)components/editor/ai/chat-image-preview.tsx(3 hunks)components/editor/code-panel-dialog.tsx(1 hunks)components/editor/code-panel.tsx(6 hunks)components/editor/contrast-checker.tsx(6 hunks)components/editor/css-import-dialog.tsx(3 hunks)components/editor/share-dialog.tsx(2 hunks)components/editor/theme-save-dialog.tsx(2 hunks)components/examples/ai-chat-demo.tsx(1 hunks)components/examples/cards/chat.tsx(5 hunks)components/examples/music/components/podcast-empty-placeholder.tsx(3 hunks)components/figma-export-dialog.tsx(2 hunks)components/get-pro-dialog-wrapper.tsx(4 hunks)components/ui/base-ui-tabs.tsx(1 hunks)components/ui/button.tsx(2 hunks)components/ui/revola.tsx(1 hunks)components/ui/scroll-area.tsx(2 hunks)hooks/use-media-query.tsx(1 hunks)next.config.ts(1 hunks)package.json(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (11)
components/ui/button.tsx (1)
lib/utils.ts (1)
cn(6-8)
components/editor/code-panel-dialog.tsx (2)
types/editor.ts (1)
ThemeEditorState(18-27)components/ui/revola.tsx (5)
ResponsiveDialog(348-348)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)ResponsiveDialogDescription(351-351)
app/(auth)/components/auth-dialog.tsx (2)
components/ui/revola.tsx (5)
ResponsiveDialog(348-348)ResponsiveDialogTrigger(357-357)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)components/ui/button.tsx (1)
Button(53-53)
components/editor/share-dialog.tsx (1)
components/ui/revola.tsx (5)
ResponsiveDialog(348-348)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)ResponsiveDialogDescription(351-351)
components/ui/base-ui-tabs.tsx (1)
lib/utils.ts (1)
cn(6-8)
components/editor/code-panel.tsx (2)
components/ui/base-ui-tabs.tsx (1)
TabsIndicator(76-76)components/ui/scroll-area.tsx (1)
ScrollBar(46-46)
components/editor/theme-save-dialog.tsx (2)
components/ui/revola.tsx (6)
ResponsiveDialog(348-348)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)ResponsiveDialogDescription(351-351)ResponsiveDialogFooter(352-352)components/ui/button.tsx (1)
Button(53-53)
components/editor/css-import-dialog.tsx (3)
components/ui/revola.tsx (6)
ResponsiveDialog(348-348)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)ResponsiveDialogDescription(351-351)ResponsiveDialogFooter(352-352)components/ui/scroll-area.tsx (1)
ScrollArea(46-46)components/ui/button.tsx (1)
Button(53-53)
components/ui/revola.tsx (1)
lib/utils.ts (1)
cn(6-8)
components/ui/scroll-area.tsx (1)
lib/utils.ts (1)
cn(6-8)
components/editor/ai/chat-image-preview.tsx (1)
components/ui/revola.tsx (5)
ResponsiveDialog(348-348)ResponsiveDialogTrigger(357-357)ResponsiveDialogContent(350-350)ResponsiveDialogHeader(353-353)ResponsiveDialogTitle(356-356)
🔇 Additional comments (54)
package.json (1)
15-15: Monitor beta dependency for stability.Adding
@base-ui-components/reactat version1.0.0-beta.2supports the new responsive tabs implementation. Since this is a beta version, consider monitoring for potential breaking changes and plan to update to a stable release when available.components/examples/ai-chat-demo.tsx (1)
38-38: Good removal of arbitrary scaling for better responsive behavior.Removing
max-lg:scale-80aligns with the responsive design improvements in this PR. This eliminates arbitrary scaling that could interfere with the new responsive dialog system and provides more predictable layout behavior across different screen sizes.components/ui/button.tsx (1)
14-21: LGTM! Clean formatting improvements.The formatting changes to single-line variant definitions and condensed JSX improve code readability while maintaining the same functionality.
Also applies to: 47-47
components/editor/code-panel.tsx (3)
7-13: Good migration to the new base UI tabs system.The switch to
@/components/ui/base-ui-tabsaligns with the PR's goal of using the new responsive UI components. AddingTabsIndicatorwill provide better visual feedback for the active tab state.
220-220: Great addition of TabsIndicator for better UX.The
TabsIndicatorcomponent withbg-background rounded-smstyling will provide clear visual feedback for the active tab, improving the user experience.
251-253: Improved ScrollBar implementation with explicit orientations.Separating horizontal and vertical ScrollBar components with explicit
orientationprops improves code clarity and provides better control over scrolling behavior in both directions.Also applies to: 262-264
components/editor/code-panel-dialog.tsx (3)
3-9: LGTM! Import changes align with responsive dialog refactor.The imports have been correctly updated to use the new responsive dialog components from
@/components/ui/revola, which provides better semantic structure and accessibility support.
19-31: Excellent responsive design and accessibility improvements.The dialog structure has been enhanced with:
- Proper responsive sizing using
dvhunits and breakpoint-specific constraints- Good overflow handling with
overflow-hiddenon content andoverflow-autoon the scrollable area- Accessibility improvements with semantic header structure using
sr-onlyfor screen readers- Appropriate spacing and padding for different screen sizes
17-17: API compatibility maintained during refactor.The function signature remains unchanged, ensuring backward compatibility while benefiting from the new responsive dialog implementation.
components/examples/music/components/podcast-empty-placeholder.tsx (4)
4-12: LGTM! Comprehensive responsive dialog imports.All necessary responsive dialog components are imported, including the trigger and footer components needed for this interactive dialog.
25-25: Minor CSS class reordering.These className reorderings don't affect functionality - likely automated formatting changes that improve consistency.
Also applies to: 34-34
37-64: Well-structured responsive dialog implementation.The dialog structure properly implements:
- Responsive padding and spacing adjustments
- Semantic header and footer components with appropriate styling
- Preserved form functionality within the new dialog structure
- Consistent use of the ResponsiveDialog pattern
44-58: Content structure properly adapted for responsive layout.The form content maintains its original structure while properly integrating with the responsive dialog system through appropriate spacing and padding adjustments.
components/editor/css-import-dialog.tsx (4)
6-14: LGTM! Imports updated for responsive dialog and scrollable content.The imports correctly include all necessary responsive dialog components and the ScrollArea component for enhanced content scrolling.
59-61: Excellent ScrollArea integration with responsive constraints.The dialog structure properly implements:
- ScrollArea with flex layout for proper height management
- Well-thought-out responsive height constraints using
dvhunits- Custom viewport styling for enhanced scrolling experience
- Appropriate shadow and width constraints for different screen sizes
62-98: Content structure well-preserved with responsive adjustments.The header and form content maintain their original functionality while properly adapting to the responsive dialog layout with appropriate padding and spacing adjustments.
101-108: Excellent responsive footer with mobile-optimized buttons.The footer implementation demonstrates good UX practices:
- Full-width buttons on mobile (
max-sm:w-full) improve touch targets- Appropriate background styling and visual separation with border-top
- Proper margin adjustments for different screen sizes
- Preserved button functionality and accessibility
app/(auth)/components/auth-dialog.tsx (4)
10-16: LGTM! Responsive dialog imports with trigger support.The imports correctly include all necessary responsive dialog components, including the trigger component for conditional dialog activation.
80-82: Well-implemented conditional trigger rendering.The dialog structure properly handles the optional trigger prop with conditional rendering, and the content container has appropriate responsive constraints.
84-93: Authentication form properly preserved with responsive enhancements.The header and form structure maintain the original authentication logic while benefiting from:
- Dynamic title and description based on sign-in/sign-up mode
- Preserved social login functionality with loading states
- Responsive layout improvements for better mobile experience
Also applies to: 95-120
122-142: Toggle section well-adapted for responsive layout.The mode switching functionality is preserved while benefiting from responsive spacing and styling adjustments that improve the user experience across different screen sizes.
components/editor/share-dialog.tsx (3)
7-13: LGTM! Responsive dialog imports consistent with refactor pattern.The imports have been correctly updated to use the responsive dialog components, maintaining consistency with the broader refactor.
31-39: Good use of onlyDialog prop for simple share functionality.The dialog structure appropriately uses the
onlyDialogprop, which likely ensures this simple share dialog renders as a modal rather than a drawer, improving the user experience for this specific use case.
41-51: Enhanced input styling with preserved copy functionality.The input has been improved with better text selection styling using custom selection colors, while the copy functionality and button interactions remain fully preserved.
components/editor/action-bar/components/mcp-dialog.tsx (4)
2-8: LGTM! Consistent migration to responsive components.The import changes correctly replace the legacy Dialog components with ResponsiveDialog from the new revola module and introduce standardized Tabs components from base-ui-tabs. This aligns with the project-wide migration described in the PR objectives.
Also applies to: 12-18
47-55: LGTM! Improved responsive dialog structure.The ResponsiveDialog implementation properly handles overflow with
max-h-[90dvh]and provides appropriate responsive sizing. The header structure maintains accessibility while adapting to the new responsive framework.
57-72: LGTM! Enhanced tabs with visual indicators.The new tabs implementation using BaseUI components provides better standardization and UX. The addition of
TabsIndicatorimproves visual feedback for active tabs, and the responsive styling maintains consistency across devices.
74-116: LGTM! Improved content layout and scrolling.The layout updates provide better structure with proper borders and spacing. The
size-full overflow-autoon the pre element ensures code blocks remain readable and scrollable when content is lengthy.Also applies to: 119-121
components/examples/cards/chat.tsx (4)
20-27: LGTM! Consistent dialog migration.The import changes properly replace Dialog components with ResponsiveDialog variants, maintaining consistency with the project-wide migration to responsive dialogs.
168-175: LGTM! Proper responsive dialog structure.The ResponsiveDialog implementation uses appropriate constraints (
max-h-[85%]) and responsive padding classes. The header structure maintains proper hierarchy and accessibility.
186-186: LGTM! Improved spacing and consistent avatar sizing.The addition of
gap-2to CommandItem and explicitsize-7.5on Avatar components provides better visual consistency and spacing throughout the user selection interface.Also applies to: 198-198, 219-219
215-237: LGTM! Streamlined footer layout and button styling.The ResponsiveDialogFooter implementation provides proper responsive spacing and the removal of
size="sm"from the button aligns with the project's button standardization efforts.components/ui/scroll-area.tsx (2)
8-11: LGTM! Well-designed viewport customization.The
viewPortClassNameprop addition provides flexibility for customizing the scroll area viewport while maintaining proper defaults. The implementation correctly uses thecnutility for class merging and maintains type safety.Also applies to: 17-17
34-41: LGTM! Improved class organization.The formatting changes improve readability by reorganizing CSS classes in a more logical order while maintaining all functionality. Good code hygiene improvement.
components/editor/ai/chat-image-preview.tsx (4)
1-7: LGTM! Consistent responsive dialog imports.The import changes properly replace Dialog components with ResponsiveDialog variants, maintaining consistency with the project-wide migration.
41-44: LGTM! Proper responsive layout and accessibility.The dialog content properly uses
dvhunits for viewport-relative sizing and responsive max-width constraints. The sr-only header maintains accessibility requirements while staying visually hidden for the image preview context.
45-51: LGTM! Better responsive image handling.The image implementation improvements include better prop ordering and responsive classes. Using
size-autowithmax-h-[80vh] max-w-[80vw]andobject-containensures the image scales appropriately within the dialog boundaries.
19-19: Confirm consistent onlyDialog usageThe
onlyDialogprop is already applied incomponents/editor/share-dialog.tsxand implemented incomponents/ui/revola.tsxto force a modal dialog on all screen sizes. Using it here incomponents/editor/ai/chat-image-preview.tsxfollows the same UX pattern—no drawer on desktop or mobile—which is appropriate for an image preview. No changes needed.components/get-pro-dialog-wrapper.tsx (4)
11-18: LGTM! Import migration and export visibility change.The ResponsiveDialog imports are consistent with the project migration. Note that
GetProDialogis now exported, making it available for external use - ensure this is intentional.Also applies to: 31-31
33-41: LGTM! Comprehensive responsive dialog structure.The dialog implementation uses sophisticated responsive sizing with
md:w-[calc(100vw-2rem)] md:max-w-4xlfor optimal layout across devices. The header structure maintains proper spacing and accessibility.
37-37: LGTM! Improved layout symmetry and positioning.The section width changes to
md:w-1/2for both left and right sections create better visual balance. The chat preview positioning update toinset-4 top-4provides more consistent spacing within the container.Also applies to: 83-83, 102-102
70-79: LGTM! Better mobile-responsive footer layout.The footer layout change to
flex-col gap-2creates a vertical button stack that's more mobile-friendly. The button structure maintains functionality while improving responsive design.components/ui/base-ui-tabs.tsx (1)
5-76: LGTM! Well-implemented tabs component system.The implementation follows React best practices with proper forwardRef usage, TypeScript typing, and consistent styling patterns. The use of BaseUI primitives provides a solid foundation for accessible tabs.
components/figma-export-dialog.tsx (2)
13-19: LGTM! Proper ResponsiveDialog import and usage.The migration from the old Dialog components to ResponsiveDialog is correctly implemented, following the new responsive design pattern.
45-53: Good responsive design and accessibility implementation.The ResponsiveDialogContent with responsive sizing constraints and the use of sr-only for the header provides good accessibility while maintaining visual design. The ScrollArea integration ensures proper content handling.
components/editor/contrast-checker.tsx (4)
13-20: LGTM! Proper migration to ResponsiveDialog and absolute imports.The conversion to ResponsiveDialog components and the switch to absolute import paths aligns with the project's standardization efforts.
242-248: Excellent UX improvement with conditional disabled state.Disabling the "Issues" filter when there are no issues (
totalIssues === 0) prevents unnecessary user interaction and provides clear visual feedback about the current state.
197-197: Good responsive design improvements.The updated responsive constraints (
max-h-[95dvh],sm:max-h-[min(700px,85dvh)],sm:w-[calc(100%-2rem)]) provide better dialog sizing across different screen sizes.
256-259: Nice implementation of sticky header with proper background.The sticky header with background (
bg-background sticky -top-px z-10) ensures good visual separation while scrolling through the contrast results.components/editor/theme-save-dialog.tsx (2)
18-25: LGTM! Clean ResponsiveDialog integration.The migration from Dialog to ResponsiveDialog components is properly implemented with correct import paths and component usage.
74-121: Well-structured responsive dialog layout.The form layout adaptation to the new ResponsiveDialog structure maintains proper spacing, accessibility, and responsive behavior. The footer styling with proper background and border provides good visual separation.
components/ui/revola.tsx (3)
181-225: Well-implemented responsive styling system.The use of
class-variance-authoritywith compound variants provides a maintainable and flexible styling system for different device types and drawer directions.
237-275: Good implementation of interaction prevention logic.The conditional event prevention logic properly handles different dialog modes (modal, dismissible, alert) while maintaining accessibility through proper event handling.
74-78: Fix incorrect controlled state logic.The controlled state logic is inverted. When
controlledOpenis undefined, it should be uncontrolled (internal state), but the current logic treats it as controlled.- const isControlledOpen = typeof controlledOpen === "undefined"; + const isControlled = typeof controlledOpen !== "undefined"; const toggleInternalState = () => setInternalState((prev) => !prev); - const open = isControlledOpen ? internalState : controlledOpen; - const onOpenChange = isControlledOpen ? toggleInternalState : controlledOnOpenChange; + const open = isControlled ? controlledOpen : internalState; + const onOpenChange = isControlled ? controlledOnOpenChange : toggleInternalState;Likely an incorrect or invalid review comment.
- Remove unnecessary commented-out code for better readability - Streamline TabsIndicator implementation for improved clarity
…akpoint detection - Replace isMobile with isDesktop in ResponsiveDialog components for improved clarity - Ensure consistent behavior across dialog and drawer implementations based on desktop view
…ustomization (v1.4) update - Introduce closeButtonClassName and dragHandleClassName props for better styling control - Update context initialization to allow null values for improved type safety - Refactor ResponsiveDialogContent to streamline rendering logic and improve readability
…proved readability - Rearranged import statements for better structure - Removed unnecessary props from ResponsiveDialogContent for cleaner layout - Enhanced overall code clarity and maintainability
…nsistency - Rearranged import statements for better structure - Cleaned up component imports to enhance readability - Maintained overall code organization for future maintainability
…ponents for improved readability - Cleaned up and rearranged import statements for better structure - Updated ResponsiveDialogContent and ResponsiveDialogHeader for consistent padding and spacing - Enhanced overall layout and visual consistency across multiple dialog components
2 participants
✨ Additions & Improvements
Dialogcomponent withResponsiveDialog(Revola) to provide a more mobile-friendly and adaptive UX.Tabscomponent built using BaseUI for consistent tabbed navigation.css-import-dialogto use a sticky header/footer layout for better usability.contrast-checker.tsxwhen no issues are present.code-panel-dialog.tsxscrollable on both axes for improved readability of long code snippets.tweakcn-revola-refactor.mp4
Summary by CodeRabbit
New Features
Enhancements
Chores