Skip to content

Fix blank frontend mount and add foundational UI styling #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ChrisAdamsdevelopment wants to merge 1 commit into from
Closed

Fix blank frontend mount and add foundational UI styling #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/app.tsx"></script>
<script type="module" src="/main.tsx"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from 'react';
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 4, 2026

Choose a reason for hiding this comment

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

P2 Badge Include the new entrypoint in TypeScript checks

index.html now boots the app from main.tsx, but tsconfig.json still limits include to app.tsx and src, so npm run build's tsc step does not type-check this new bootstrap file. That creates a blind spot where entrypoint regressions (e.g., bad imports or mount logic changes) can ship even though the type-check step passes. Please add main.tsx (or broaden the include pattern) so CI validates the actual runtime entrypoint.

Useful? React with 👍 / 👎.

import { createRoot } from 'react-dom/client';
import App from './app';
import './styles.css';

createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
32 changes: 32 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
color-scheme: dark;
}

body {
@apply min-h-screen bg-slate-950 text-slate-100 antialiased;
margin: 0;
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

* {
scrollbar-width: thin;
scrollbar-color: rgb(51 65 85) rgb(15 23 42);
Comment on lines +15 to +17
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot May 4, 2026

Choose a reason for hiding this comment

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

suggestion: Consider scoping the global scrollbar styles more narrowly than the universal * selector.

Applying these scrollbar styles via * affects every scrollable element, which can lead to unintended visuals in nested scroll areas (modals, sidebars, etc.) and extra style computation. Consider limiting this to html, body, or a specific app container instead, for example:

html {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) rgb(15 23 42);
}

Suggested implementation:

html {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) rgb(15 23 42);
}

I don't see the * scrollbar block in the provided snippet, so:

  1. Ensure the * { … } scrollbar block exists in styles.css exactly as in the SEARCH block above so this edit applies cleanly.
  2. If your app root container (e.g. #root, .app) is the main scroll container instead of html, you may prefer to scope the scrollbar styles to that selector instead of html.

}

::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: rgb(15 23 42);
}

::-webkit-scrollbar-thumb {
background: rgb(51 65 85);
border-radius: 9999px;
}