Improve mobile version#249
Merged
Merged
Conversation
spring1843
commented
Dec 1, 2025
spring1843
commented
Owner
- Remove keyboard shortcuts from mobile
- Make security badge smaller
Export the Tool interface, render a tool directory for the homepage route, and add corresponding CSS styles for the SSR tool directory. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: d623ea7e-2791-46f5-9f07-97156ab8e4a9 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Update `home.tsx` to remove SSR tool directory using `useEffect`. Modify `vite.ts` to use `Date.now()` for cache busting in `main.tsx`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: bee0ba40-d8e6-4f71-bc59-db71c570e000 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Update CSS to ensure consistent styling and transitions for tool cards. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 0c8e9800-8d74-4aa8-9494-5585b76e2e32 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 5f6ecb13-f6fa-4230-8041-50e17806f3c3 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Add inline script for immediate theme detection and critical CSS to prevent flash of unstyled content and dark mode flash. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: d36dd8a5-d164-4ac0-b955-af662119e311 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Replace Tailwind utility classes with inline styles in SSR explanations renderer and update critical CSS to prevent layout shifts and flashes of unstyled content. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: 5cb7ba12-81c3-43dd-8c26-69914547a8f0 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 513a9ff7-9ed3-4d11-94cc-959c88d9a5da Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/M1orwtB
Refactor to extract the `escapeHtml` function from `render-explanations.ts` and `render-tool-directory.ts` into a new shared utility file `scripts/html-utils.ts` to eliminate code duplication. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 0b04b53d-0b16-40ba-a3bb-7aa95bfa828c Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/ygMcb1N
…into links-in-main-index
Update ShortcutBadge component, index.css, home.tsx, and generate-static-routes.ts to conditionally hide keyboard shortcuts on screens smaller than 768px. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 27739b90-6f20-478d-8f92-e22b01b7d529 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/G1T5F85
Add `hidden md:inline-flex` to the compact variant of the `SecurityBanner` component to hide it on mobile screens. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 1a4d0308-8145-4f5a-b2e4-caf2f388d8ec Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: fab29db1-ebaf-4abf-8707-a09eed433de7 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/46062f4a-48c0-4bc7-8f40-e3917ba2ed87/1a4d0308-8145-4f5a-b2e4-caf2f388d8ec/G1T5F85
✅ Deploy Preview for freedevtool ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves the mobile user experience by hiding keyboard shortcut displays and the security badge on smaller screens, recognizing that these elements are less relevant on mobile devices where physical keyboards are not available.
Key Changes:
- Keyboard shortcuts hidden on mobile (< 768px) and visible on desktop
- Security banner (compact variant) hidden on mobile to save screen space
- Cleanup of unused port configuration in .replit
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
scripts/generate-static-routes.ts |
Updated critical SSR CSS to hide .ssr-tool-shortcut on mobile with media query |
client/src/pages/home.tsx |
Hide shortcut display container on home page for mobile viewports |
client/src/index.css |
Added responsive media query to hide tool shortcuts on mobile |
client/src/components/ui/shortcut-badge.tsx |
Applied hidden md:inline-block to hide badge on mobile |
client/src/components/ui/security-banner.tsx |
Applied hidden md:inline-flex to compact variant for mobile |
.replit |
Removed unused port configuration (37939/4200) |
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
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.