Merge pull request #985 from hxrshxz/fix-overlap

fix: update button font size and padding to prevent overlap

Author: ksen0

src/components/Dropdown/styles.module.scss

@@ -118,7 +118,14 @@ button.chevron {
 .option > button > span {
   text-align: left;
   padding-left: 44px;
-  padding-right: 10px;
+  // 38px padding-right holds the chevron icon on mobile for better touch targets
+  padding-right: 38px;
   display: inline-block;
   width: 100%;
+
+
+  @media (min-width: $breakpoint-tablet) {
+    font-size: 1rem;
+    padding-right: 10px;
+  }
 }

src/components/PageHeader/HomePage.astro

@@ -10,15 +10,15 @@ const { config } = Astro.props;
 
 ---
 
-<div class="px-lg pt-5xl lg:pt-3xl pb-0 h-full">
+<div class="px-lg pt-[11.25rem] 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>
     {

src/components/PageHeader/RootPage.astro

@@ -12,7 +12,7 @@ const borderStyle = isFilterRoute ? "" : "border-b border-sidebar-type-color";
 ---
 
 <div
-  class=`content-grid-simple min-h-[350px] h-[50vh] pt-5xl lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
+  class=`content-grid-simple min-h-[350px] h-[50vh] pt-[11.25rem] lg:pt-4xl bg-accent-color text-accent-type-color pb-md px-5 md:px-lg ${borderStyle}`
 >
   <h1 class="whitespace-pre-line col-span-full mb-5">{title}</h1>
   <p class="text-h3 !mt-0 mb-3xl col-span-2">{subtitle}</p>

src/components/ReferenceDirectoryWithFilter/index.tsx

@@ -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: {
@@ -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, "")
@@ -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 });
           }
@@ -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 }}
                   />
                 )}
@@ -143,7 +143,7 @@ export const ReferenceDirectoryWithFilter = ({
     category: { name: string },
   ) => {
     return !(!subcat.name || !category.name);
-  }
+  };
 
   const getSubcatHeading = (
     subcat: { name: string; entry?: any },
@@ -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"
@@ -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>

src/components/Settings/styles.module.scss

@@ -15,7 +15,7 @@
 
   padding: var(--spacing-sm) 1.25rem;
   grid-template-columns: repeat(6, minmax(0, 1fr));
-  grid-template-rows: repeat(2, var(--settings-container-height-touch));
+  grid-auto-rows: var(--settings-container-height-touch);
   row-gap: 20px;
   column-gap: 40px;
 
@@ -43,7 +43,7 @@
 
 .localeselect,
 .a11yselect {
-  grid-column: span 3;
+  grid-column: span 6;
   @media (min-width: $breakpoint-tablet) {
     grid-column: span 3;
   }

styles/global.scss

@@ -126,7 +126,7 @@ h4 {
     font-size: 1.5rem;
     line-height: 1.1333;
     -webkit-text-stroke-width: 0.15px;
-  } 
+  }
 }
 
 .text-body-large {
@@ -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);
@@ -308,7 +310,8 @@ pre.code-box,
   }
 }
 
-.experimental, .deprecated {
+.experimental,
+.deprecated {
   background-color: var(--bg-yellow);
 }
 
@@ -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);
 
       @media (min-width: $breakpoint-tablet) {
         height: calc(50vh - var(--spacing-5xl));
@@ -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 {
@@ -548,4 +550,4 @@ body {
 
 .dark-theme pre.mermaid svg {
   filter: invert(100%);
-}
+}