Skip to content

Responsive UI#8

Merged
utkarsh232005 merged 4 commits into
KDM-cli:mainfrom
Yuvraj-Sarathe:responsive-ui
May 26, 2026
Merged

Responsive UI#8
utkarsh232005 merged 4 commits into
KDM-cli:mainfrom
Yuvraj-Sarathe:responsive-ui

Conversation

@Yuvraj-Sarathe
Copy link
Copy Markdown
Member

@Yuvraj-Sarathe Yuvraj-Sarathe commented May 26, 2026

Added changes

#4 issue solved

Things to review in vercel:

  1. Deployment with Vite or Tan
  2. DEPLOYMENT WITHOUT CACHE
  3. If fails, redeploy and check the logs for issue.

Summary by CodeRabbit

  • New Features

    • Mobile hamburger menu with off-canvas panel for quick access to features, docs, and a GitHub CTA.
  • Style

    • Responsive stats layout improved for mobile and desktop.
    • Commands sidebar now supports horizontal scrolling.
    • Terminal output area heights tuned for better visibility across screen sizes.
  • Chores

    • Added a post-install compatibility patch to ensure package exports are available after install.

Review Change Stack

@vercel
Copy link
Copy Markdown

vercel Bot commented May 26, 2026

@Yuvraj-Sarathe is attempting to deploy a commit to the utkarsh232005's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 26, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4cb79a61-d782-4a64-a259-e6ceb0f8f53b

📥 Commits

Reviewing files that changed from the base of the PR and between 6aa9072 and 77d25d4.

📒 Files selected for processing (1)
  • scripts/patch-lovable-config.cjs

📝 Walkthrough

Walkthrough

Adds a postinstall script that patches a dependency, implements a mobile off-canvas Navbar, tweaks responsive styles in Commands/Hero/Terminal, and makes the Vite Cloudflare plugin explicitly disabled on Vercel.

Changes

Responsive UI and dependency patching

Layer / File(s) Summary
Lovable config patching setup
package.json, scripts/patch-lovable-config.cjs
Adds a postinstall hook that runs a new Node.js script to inject an exports field into @lovable.dev/vite-tanstack-config when missing, preferring ESM for import and CJS for require.
Mobile navigation with off-canvas menu
src/components/Navbar.tsx
Imports Menu and Sheet UI pieces, adds a mobile-only hamburger that opens a right-side Sheet with navigation links and a GitHub “Star us” CTA; desktop CTA is hidden on mobile via responsive classes.
Responsive layout adjustments
src/components/Commands.tsx, src/components/Hero.tsx, src/components/Terminal.tsx
Commands sidebar gains horizontal scrolling; Hero stats grid becomes grid-cols-1 sm:grid-cols-3 and metric typography adjusts; Terminal min-height is min-h-[240px] by default and md:min-h-[360px] on medium+.
Cloudflare build configuration
vite.config.ts
Changes Cloudflare option to isVercel ? false : {} to explicitly disable the plugin on Vercel and otherwise provide an empty config object.

Sequence Diagram(s)

sequenceDiagram
  participant Installer
  participant PatchScript
  participant NodeModules
  Installer->>PatchScript: run postinstall (node scripts/patch-lovable-config.cjs)
  PatchScript->>NodeModules: resolve package.json path
  PatchScript->>NodeModules: read package.json
  PatchScript->>NodeModules: if no exports -> add exports mapping
  PatchScript->>NodeModules: write updated package.json
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Possibly related PRs

  • KDM-cli/kdm-website#7: Reverts the mobile responsive UI changes and removes the postinstall hook and patch script.
  • KDM-cli/kdm-website#5: Adds the same postinstall patch script and applies similar responsive UI and Vite config changes.

Suggested labels

frontend, config

Poem

🐰 I hopped through styles, small and wide,

A tucked-away menu for the mobile side,
A little script nudged a package true,
Cloudflare sleeps when Vercel's in view,
Hooray — the site is snug and spry.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Title check ❓ Inconclusive The title 'Responsive UI' is vague and generic, using a non-descriptive term that lacks specificity about the actual changes implemented in the changeset. Consider a more specific title that highlights the primary changes, such as 'Add responsive layouts and mobile navigation' or 'Improve responsive design across components'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
src/components/Navbar.tsx (1)

4-9: 💤 Low value

Optional: Format imports to match Prettier rules.

ESLint/Prettier prefers single-line imports when they fit within line length limits.

♻️ Suggested formatting
-import {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetClose,
-} from "`@/components/ui/sheet`";
+import { Sheet, SheetTrigger, SheetContent, SheetClose } from "`@/components/ui/sheet`";
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/components/Navbar.tsx` around lines 4 - 9, Reformat the named import
block in Navbar.tsx to a single-line import so it complies with Prettier/ESLint
rules; replace the multi-line import of Sheet, SheetTrigger, SheetContent,
SheetClose from "`@/components/ui/sheet`" with a single-line import statement
importing those symbols together to keep the file within line-length
conventions.
scripts/patch-lovable-config.cjs (2)

29-37: 💤 Low value

Consider validating that target dist files exist before patching.

The script assumes ./dist/index.js and ./dist/index.cjs exist in the package. If the package structure changes in a future version, the patch will succeed but imports may fail at runtime.

🛡️ Optional: add file existence validation
+const distPath = path.dirname(pkgPath);
+const esmEntry = path.join(distPath, "dist", "index.js");
+const cjsEntry = path.join(distPath, "dist", "index.cjs");
+
+if (!fs.existsSync(esmEntry) || !fs.existsSync(cjsEntry)) {
+  console.warn("[patch-lovable-config] expected dist files not found — skipping");
+  process.exit(0);
+}
+
 pkg.exports = {
   ".": {
     import: "./dist/index.js",
     require: "./dist/index.cjs",
   },
 };
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/patch-lovable-config.cjs` around lines 29 - 37, Before writing the
patched package JSON, verify that the files referenced in pkg.exports
(specifically "./dist/index.js" and "./dist/index.cjs") actually exist; if
either is missing, abort or log an error and do not call
fs.writeFileSync(pkgPath, ...). Update the logic around where pkg.exports is set
(the block that assigns pkg.exports and then calls fs.writeFileSync) to perform
synchronous existence checks (fs.existsSync or equivalent) for those paths, and
emit a clear console.error or throw with context including pkgPath and the
missing filename(s) so the patch fails fast instead of producing a broken
package entrypoint.

1-7: ⚡ Quick win

Consider using patch-package for more maintainable dependency patching.

The current approach works but direct node_modules patching can be fragile if package updates change internal structure. The patch-package library is industry-standard for this use case, generates diff files that are version-controlled, and provides better error messages when patches fail to apply.

📦 Alternative: migrate to patch-package

Install patch-package:

npm install --save-dev patch-package

Make your changes to node_modules/@lovable.dev/vite-tanstack-config/package.json manually, then run:

npx patch-package `@lovable.dev/vite-tanstack-config`

Update package.json:

 "scripts": {
   ...
-  "postinstall": "node scripts/patch-lovable-config.cjs"
+  "postinstall": "patch-package"
 }

This generates a patches/ directory with versioned diff files that can be reviewed and committed.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@scripts/patch-lovable-config.cjs` around lines 1 - 7, Replace the ad-hoc
node_modules edit with patch-package: add patch-package as a devDependency (npm
install --save-dev patch-package), manually edit the package.json inside
`@lovable.dev/vite-tanstack-config` in node_modules to prefer the ESM entry, run
npx patch-package `@lovable.dev/vite-tanstack-config` to generate a patch in
patches/, commit that patch file, and replace/disable the custom script
patch-lovable-config.cjs by adding a package.json "postinstall": "patch-package"
script so patches are applied automatically on installs.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@scripts/patch-lovable-config.cjs`:
- Around line 8-15: The path.resolve call that builds pkgPath is missing a
trailing comma after the final argument ("package.json"); update the argument
list in the pkgPath = path.resolve(...) expression to include a trailing comma
after "package.json" so it conforms to the project's ESLint formatting rules
(locate the pkgPath variable and the path.resolve invocation).

---

Nitpick comments:
In `@scripts/patch-lovable-config.cjs`:
- Around line 29-37: Before writing the patched package JSON, verify that the
files referenced in pkg.exports (specifically "./dist/index.js" and
"./dist/index.cjs") actually exist; if either is missing, abort or log an error
and do not call fs.writeFileSync(pkgPath, ...). Update the logic around where
pkg.exports is set (the block that assigns pkg.exports and then calls
fs.writeFileSync) to perform synchronous existence checks (fs.existsSync or
equivalent) for those paths, and emit a clear console.error or throw with
context including pkgPath and the missing filename(s) so the patch fails fast
instead of producing a broken package entrypoint.
- Around line 1-7: Replace the ad-hoc node_modules edit with patch-package: add
patch-package as a devDependency (npm install --save-dev patch-package),
manually edit the package.json inside `@lovable.dev/vite-tanstack-config` in
node_modules to prefer the ESM entry, run npx patch-package
`@lovable.dev/vite-tanstack-config` to generate a patch in patches/, commit that
patch file, and replace/disable the custom script patch-lovable-config.cjs by
adding a package.json "postinstall": "patch-package" script so patches are
applied automatically on installs.

In `@src/components/Navbar.tsx`:
- Around line 4-9: Reformat the named import block in Navbar.tsx to a
single-line import so it complies with Prettier/ESLint rules; replace the
multi-line import of Sheet, SheetTrigger, SheetContent, SheetClose from
"`@/components/ui/sheet`" with a single-line import statement importing those
symbols together to keep the file within line-length conventions.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c20a23e0-7e14-4053-a958-8fedd752294f

📥 Commits

Reviewing files that changed from the base of the PR and between 6e61ea7 and 6fc5d86.

📒 Files selected for processing (7)
  • package.json
  • scripts/patch-lovable-config.cjs
  • src/components/Commands.tsx
  • src/components/Hero.tsx
  • src/components/Navbar.tsx
  • src/components/Terminal.tsx
  • vite.config.ts

Comment thread scripts/patch-lovable-config.cjs
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 26, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
kdm-website Ready Ready Preview, Comment May 26, 2026 1:49pm

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@scripts/patch-lovable-config.cjs`:
- Line 12: The package path segment string in scripts/patch-lovable-config.cjs
is incorrectly quoted with backticks as "`@lovable.dev`", causing pkgPath to
point to a non-existent directory and the script to skip patching; fix it by
changing that array entry to a normal string "`@lovable.dev`" (remove the
backticks) so pkgPath resolves correctly and the patch logic (where pkgPath is
used) can find and modify the package.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f7e8116b-55d3-4f81-a5bd-d32841fddaa9

📥 Commits

Reviewing files that changed from the base of the PR and between 6fc5d86 and 6aa9072.

📒 Files selected for processing (1)
  • scripts/patch-lovable-config.cjs

Comment thread scripts/patch-lovable-config.cjs Outdated
@utkarsh232005 utkarsh232005 merged commit 9ff3b35 into KDM-cli:main May 26, 2026
5 of 8 checks passed
@utkarsh232005
Copy link
Copy Markdown
Member

@all-contributors please add @Yuvraj-Sarathe for design

@allcontributors
Copy link
Copy Markdown

@utkarsh232005

File README.md was not found in the repository (KDM-cli/kdm-website).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants