From 8ebd17c99c766f7acf8a277f4a3b1a9651933a20 Mon Sep 17 00:00:00 2001 From: Jonas Braathen Date: Sun, 5 Jul 2026 02:23:03 +0200 Subject: [PATCH] improve text placement in buttons and text inputs on non-apple devices --- web/src/components/blocks/PageSection.tsx | 2 +- web/src/components/events/EventFilter.tsx | 2 +- web/src/components/general/Icon.tsx | 3 ++- web/src/components/general/Newsletter.tsx | 2 +- web/src/components/home/HomePageView.tsx | 3 +++ web/src/components/layout/header.module.scss | 3 ++- .../search/searchContainer.module.scss | 3 ++- web/src/css/base.scss | 6 ++++- web/src/css/button.scss | 22 ++++++++++++++++++- 9 files changed, 38 insertions(+), 8 deletions(-) diff --git a/web/src/components/blocks/PageSection.tsx b/web/src/components/blocks/PageSection.tsx index 6e96689..0bc04c3 100644 --- a/web/src/components/blocks/PageSection.tsx +++ b/web/src/components/blocks/PageSection.tsx @@ -59,7 +59,7 @@ export const PageSectionNavigationBlock = ({ return (
  • - {section.title} + {section.title}
    • ); diff --git a/web/src/components/events/EventFilter.tsx b/web/src/components/events/EventFilter.tsx index e46ac99..84751c5 100644 --- a/web/src/components/events/EventFilter.tsx +++ b/web/src/components/events/EventFilter.tsx @@ -57,7 +57,7 @@ export const EventFilter = ({ data-active={activeCategories?.includes(category.slug)} onClick={() => toggleCategory(category.slug)} > - {category.name} + {category.name} ))} diff --git a/web/src/components/general/Icon.tsx b/web/src/components/general/Icon.tsx index 94615f4..fbfcb1e 100644 --- a/web/src/components/general/Icon.tsx +++ b/web/src/components/general/Icon.tsx @@ -26,7 +26,8 @@ export function Icon({ )} {type === "externalLink" && ( - + // glyph is drawn ~20u up-and-left of centre, so offset the viewBox to recentre it + )} {type === "search" && ( diff --git a/web/src/components/general/Newsletter.tsx b/web/src/components/general/Newsletter.tsx index 1f8851e..1c5ca65 100644 --- a/web/src/components/general/Newsletter.tsx +++ b/web/src/components/general/Newsletter.tsx @@ -14,7 +14,7 @@ export const Newsletter = ({ url }: { url?: string }) => {

    Meld deg på vårt nyhetsbrev og hold deg oppdatert på arrangementer og siste nytt!

    - Meld deg på + Meld deg på diff --git a/web/src/components/home/HomePageView.tsx b/web/src/components/home/HomePageView.tsx index 0fcffbd..b8e048d 100644 --- a/web/src/components/home/HomePageView.tsx +++ b/web/src/components/home/HomePageView.tsx @@ -96,6 +96,9 @@ export function HomePageView({ home, events, news }: HomePageViewProps) { Åpningstider + + Åpningstider +
    diff --git a/web/src/components/layout/header.module.scss b/web/src/components/layout/header.module.scss index b4fd736..871030c 100644 --- a/web/src/components/layout/header.module.scss +++ b/web/src/components/layout/header.module.scss @@ -221,7 +221,8 @@ .searchIcon { position: absolute; right: 1rem; - bottom: .6rem; + top: 50%; + transform: translateY(-50%); } @media (max-width: 1200px) { diff --git a/web/src/components/search/searchContainer.module.scss b/web/src/components/search/searchContainer.module.scss index 5e76175..e3d46cc 100644 --- a/web/src/components/search/searchContainer.module.scss +++ b/web/src/components/search/searchContainer.module.scss @@ -32,7 +32,8 @@ .searchIcon { position: absolute; right: 1.2rem; - bottom: .6rem; + top: 50%; + transform: translateY(-50%); } .resultItem { diff --git a/web/src/css/base.scss b/web/src/css/base.scss index 487d8ed..caac937 100644 --- a/web/src/css/base.scss +++ b/web/src/css/base.scss @@ -131,12 +131,16 @@ input[type="text"] { font-family: inherit; font-size: var(--font-size-body); font-weight: 500; + text-box-trim: trim-both; + text-box-edge: cap alphabetic; transition: opacity var(--transition-easing); &::placeholder { font-weight: 400; color: currentColor; opacity: .6; + text-box-trim: trim-both; + text-box-edge: cap alphabetic; } &:focus, &:hover { @@ -368,4 +372,4 @@ select { .event-lead { max-width: var(--size-width-lead); margin: var(--spacing-l) auto; -} \ No newline at end of file +} diff --git a/web/src/css/button.scss b/web/src/css/button.scss index 34d6e7c..b24dd3c 100644 --- a/web/src/css/button.scss +++ b/web/src/css/button.scss @@ -24,6 +24,26 @@ button, text-decoration: none; } + // Trim label leading for consistent text centering, re-add it as padding to keep height + @supports (text-box-trim: trim-both) { + & > span:not(:has(svg)) { // labels, not the icon (also a child ) + text-box-trim: trim-both; + text-box-edge: cap alphabetic; + } + + &:has(svg) { // icon anchors height → re-add on the button + --trim-comp: 0.25em; // half of the leading removed + padding-block: calc(var(--spacing-xs) + var(--trim-comp)); + &.cta { padding-block: calc(var(--spacing-xs) * 1.5 + var(--trim-comp)); } + &.tertiary { padding-block: calc(.2rem + var(--trim-comp)); } + &.toggler { padding-block: calc(.25rem + var(--trim-comp)); } + } + + &.toggler:not(:has(svg)) { padding-block: calc(.25rem); } // icon anchors height + + &:not(:has(svg)):not(.toggler) > span { padding-block: 0.4em; } // nothing → on the label + } + &.cta { padding: calc(var(--spacing-xs)*1.5) calc(var(--spacing-s)*1.5); display: inline-flex; @@ -106,4 +126,4 @@ button, } } } -} \ No newline at end of file +}