Fix code feedback popover styling on dark backgrounds#40
Open
Blargian wants to merge 4 commits into
Open
Conversation
The "Report incorrect code" popover on code blocks had three issues
visible on the deployed site (not in local mint dev, which doesn't
render the widget):
- Cancel/Submit buttons were 4px corners inside a 16px-rounded card,
because the earlier global `a.rounded-xl, button.rounded-xl { 4px }`
rule (meant for sidebar nav) flattens every rounded-xl button.
- Submit's label is `<span class="text-white">` inside a
`dark:bg-primary-dark` (brand yellow #fdff75) button — white on
yellow is unreadable in dark mode.
- The popover's `shadow-md` is invisible against the #0b0c0e
codeblock background, so the card didn't appear to float.
Scope a restore of `rounded-xl` to 12px, force the submit label dark
on the yellow pill, and give the popover a real drop shadow in dark
mode.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
- integrations/language-clients/java/jdbc.mdx: two `clickhouse-client` links were stub MIGRATE placeholders pointing at the (non-existent) /integrations/sql-clients/sql-console. Point them at the real CLI client page at /core/concepts/features/interfaces/client. - _site/redirects.json: `/optimize` was redirecting to /core/guides/performance-and-monitoring, which doesn't exist; the page lives at /core/guides/clickhouse/performance-and-monitoring. - _site/redirects.json: `/development/adding_test_queries` was redirecting to /resources/develop-contribute/tests, which doesn't exist; the page lives at /resources/develop-contribute/contribute/tests (anchor #adding-a-new-test is preserved). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The popover sat at near-black `bg-codeblock` (#0b0c0e) while the code block it reports on uses #282828, so the widget looked like an unrelated floating card. Match the popover background to #282828; drop the nested textarea and Cancel button to the page background (#1d1d1d) so they read as recessed surfaces; and lift internal borders to #3c3c3c (same treatment used on accordion borders) so they stay visible against the new surface colors. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
With the resting textarea border now at #3c3c3c, the shipped `dark:focus:border-gray-700` (#374151) is darker than the baseline and `focus:outline-0` strips the outline, so focusing the textarea produced no visible change. Switch the focus border to the brand yellow (matching the Submit button next to it) and add a faint matching ring so focus is unambiguous in dark mode. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
1 participant
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.
The "Report incorrect code" popover on code blocks had three issues visible on the deployed site (not in local mint dev, which doesn't render the widget):
a.rounded-xl, button.rounded-xl { 4px }rule (meant for sidebar nav) flattens every rounded-xl button.<span class="text-white">inside adark:bg-primary-dark(brand yellow #fdff75) button — white on yellow is unreadable in dark mode.shadow-mdis invisible against the #0b0c0e codeblock background, so the card didn't appear to float.Scope a restore of
rounded-xlto 12px, force the submit label dark on the yellow pill, and give the popover a real drop shadow in dark mode.