Skip to content

fix: update button font size and padding to prevent overlap #985

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+43 −29
Open

fix: update button font size and padding to prevent overlap #985

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ad47d66
fix: update button font size and padding to prevent overlap
hxrshxz Oct 6, 2025
cdc51c4
fix: add comments for better understanding of padding and font size a…
hxrshxz Oct 6, 2025
dc740a9
Merge branch 'main' into fix-overlap
hxrshxz Oct 13, 2025
e5197a6
Merge branch 'main' into fix-overlap
hxrshxz Oct 16, 2025
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
8 changes: 7 additions & 1 deletion src/components/Dropdown/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,13 @@ button.chevron {
.option > button > span {
text-align: left;
padding-left: 44px;
padding-right: 10px;
padding-right: 38px;
display: inline-block;
width: 100%;
font-size: 0.75rem;
Copy link
Collaborator

@coseeian coseeian Oct 26, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I have some concerns regarding the approach of reducing the font size to fit the text within the container. While it solves the immediate constraint, it introduces a couple of problems:

  • Visual Consistency: The smaller text negatively impacts the visual aesthetics of the dropdowns. The text no longer appears to be horizontally centered with the adjacent icons. And it leads to an unbalanced look between the text and icon sizes.

  • Readability/Accessibility: I think generally it's better to prioritize larger font sizes for better readability and visibility. Shrinking the text should generally be avoided solely to fix container constraints.

I suggest to explore adjusting the grid column width to leave more space for the dropdowns instead, as long as it aligns with the site's design style guide (if any). I recommend confirming this with the site maintainers.


@media (min-width: $breakpoint-tablet) {
font-size: 1rem;
padding-right: 10px;
}
}
4 changes: 2 additions & 2 deletions src/components/PageHeader/HomePage.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ const { config } = Astro.props;

<div class="px-lg pt-5xl lg:pt-3xl pb-0 h-full">
<div class="homepage-header-top">
<div class="grid grid-cols-3 lg:grid-cols-4 gap-md overflow-hidden h-min">
<div class="grid grid-cols-3 lg:grid-cols-4 gap-md overflow-visible h-min">
<p class="col-span-2 lg:col-span-3 mt-0 text-md md:text-xl lg:text-3xl">
{config.data.heroText}
</p>
<Icon
kind="asterisk-thick"
className="col-span-1 motion-safe:animate-spin-slow text-logo-color h-full max-w-full max-h-[200px]"
className="col-span-1 motion-safe:animate-spin-slow text-logo-color h-full max-w-full max-h-[80px] md:max-h-[120px] lg:max-h-[200px]"
/>
</div>
{
Expand Down
40 changes: 22 additions & 18 deletions src/components/ReferenceDirectoryWithFilter/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { ReferenceDocContentItem } from "@/src/content/types";
import { useMemo, useRef, useState } from "preact/hooks";
import { type JSX } from "preact";
import { Icon } from "../Icon";
import flask from "@src/content/ui/images/icons/flask.svg?raw";
import warning from "@src/content/ui/images/icons/warning.svg?raw";
import flask from "@src/content/ui/images/icons/flask.svg?raw";
import warning from "@src/content/ui/images/icons/warning.svg?raw";

type ReferenceDirectoryEntry = ReferenceDocContentItem & {
data: {
Expand Down Expand Up @@ -41,14 +41,14 @@ type ReferenceDirectoryWithFilterProps = {
const getOneLineDescription = (description: string): string => {
// Matches first paragraph tag, remove HTML tags, then trim to first fullstop
const firstParagraphRegex = /^<p>(.*?)<\/p>/;
let [oneLineDescription] = description.replace(/\n/g, " ").trim()
.match(firstParagraphRegex) ?? [];
let [oneLineDescription] =
description.replace(/\n/g, " ").trim().match(firstParagraphRegex) ?? [];

if (!oneLineDescription && description) {
oneLineDescription = description;
}

if(oneLineDescription){
if (oneLineDescription) {
oneLineDescription = oneLineDescription
.replace(/^<p>|<\/p>$/g, "")
.replace(/<\/?code>/g, "")
Expand Down Expand Up @@ -80,11 +80,13 @@ export const ReferenceDirectoryWithFilter = ({
);
if (
subcat.entry &&
subcat.entry.data.title.toLowerCase().includes(searchKeyword.toLowerCase())
subcat.entry.data.title
.toLowerCase()
.includes(searchKeyword.toLowerCase())
) {
filteredEntries.push(subcat.entry);
}

if (filteredEntries.length > 0) {
subAcc.push({ ...subcat, entries: filteredEntries });
}
Expand All @@ -111,18 +113,16 @@ export const ReferenceDirectoryWithFilter = ({
aria-label={entry.data.title}
aria-describedby={`${entry.data.title}-description`}
>
<span
class="text-body-mono group-hover:underline"
>
<span class="text-body-mono group-hover:underline">
{entry.data.beta && (
<div
className="inline-block mr-2 w-[16px] h-[16px] mb-[-2px]"
className="mb-[-2px] mr-2 inline-block h-[16px] w-[16px]"
dangerouslySetInnerHTML={{ __html: flask }}
/>
)}
{entry.data.deprecated && (
<div
className="inline-block mr-2 w-[16px] h-[16px] mb-[-2px]"
className="mb-[-2px] mr-2 inline-block h-[16px] w-[16px]"
dangerouslySetInnerHTML={{ __html: warning }}
/>
)}
Expand All @@ -143,7 +143,7 @@ export const ReferenceDirectoryWithFilter = ({
category: { name: string },
) => {
return !(!subcat.name || !category.name);
}
};

const getSubcatHeading = (
subcat: { name: string; entry?: any },
Expand Down Expand Up @@ -207,7 +207,7 @@ export const ReferenceDirectoryWithFilter = ({
return (
<div>
<div class="h-0 overflow-visible">
<div class="content-grid-simple absolute -top-[75px] -left-0 -right-0 h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
<div class="content-grid-simple absolute -left-0 -right-0 -top-[60px] h-[75px] border-b border-sidebar-type-color bg-accent-color px-5 pb-lg md:px-lg ">
<div class="text-body col-span-2 flex w-full max-w-[750px] border-b border-accent-type-color text-accent-type-color">
<input
type="text"
Expand All @@ -221,10 +221,14 @@ export const ReferenceDirectoryWithFilter = ({
}}
/>
{searchKeyword.length > 0 && (
<button type="reset" class="" onClick={clearInput} aria-label="Clear search input">
<Icon kind="close" className="h-4 w-4" />
</button>

<button
type="reset"
class=""
onClick={clearInput}
aria-label="Clear search input"
>
<Icon kind="close" className="h-4 w-4" />
</button>
)}
</div>
</div>
Expand Down
18 changes: 10 additions & 8 deletions styles/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ h4 {
font-size: 1.5rem;
line-height: 1.1333;
-webkit-text-stroke-width: 0.15px;
}
}
}

.text-body-large {
Expand Down Expand Up @@ -291,7 +291,9 @@ pre.code-box,
white-space: break-spaces;
}

.callout, .experimental, .deprecated {
.callout,
.experimental,
.deprecated {
padding: var(--spacing-sm);
border-radius: 20px;
background-color: var(--bg-magenta-20);
Expand All @@ -308,7 +310,8 @@ pre.code-box,
}
}

.experimental, .deprecated {
.experimental,
.deprecated {
background-color: var(--bg-yellow);
}

Expand Down Expand Up @@ -382,8 +385,7 @@ pre.code-box,
justify-content: space-between;

// 43px is the height of the top mobile bar menu
height: calc(50vh - var(--spacing-5xl) - 43px);
max-height: calc(50vh - var(--spacing-5xl) - 43px);
min-height: calc(50vh - var(--spacing-5xl) - 43px);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Curious if there is any concern to remove the height/max-height/min-height CSS in this component?


@media (min-width: $breakpoint-tablet) {
height: calc(50vh - var(--spacing-5xl));
Expand Down Expand Up @@ -515,8 +517,8 @@ input[type="search"]::-webkit-search-results-decoration {
display: -webkit-box; // Needs webkit box to support line-clamp
}

.dark-theme.monochrome-theme .renderable-alt{
color: var(--type-black);
.dark-theme.monochrome-theme .renderable-alt {
color: var(--type-black);
}

.skip-to-main {
Expand Down Expand Up @@ -544,4 +546,4 @@ input[type="search"]::-webkit-search-results-decoration {
body {
--donate-banner-dark: #c01c4c;
--donate-banner-background: var(--donate-p5-background);
}
}