improve text placement in buttons and text inputs on non-apple devices

web/src/components/blocks/PageSection.tsx

@@ -59,7 +59,7 @@ export const PageSectionNavigationBlock = ({
           return (
             <li key={anchor}>
               <a href={`#${anchor}`} className="button">
-                {section.title}
+                <span>{section.title}</span>
               </a>
             </li>
           );

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}
+                    <span>{category.name}</span>
                   </button>
                 </li>
               ))}

web/src/components/general/Icon.tsx

@@ -26,7 +26,8 @@ export function Icon({
       )}
 
       {type === "externalLink" && (
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="M257.39-235.61 197-296l381-381H238.39v-86h486v486h-86v-339.61l-381 381Z" /></svg>
+        // glyph is drawn ~20u up-and-left of centre, so offset the viewBox to recentre it
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -980 960 960" fill="currentColor"><path d="M257.39-235.61 197-296l381-381H238.39v-86h486v486h-86v-339.61l-381 381Z" /></svg>
       )}
 
       {type === "search" && (

web/src/components/general/Newsletter.tsx

@@ -14,7 +14,7 @@ export const Newsletter = ({ url }: { url?: string }) => {
             <p>Meld deg på vårt nyhetsbrev og hold deg oppdatert på arrangementer og siste nytt!</p>
         </div>
         <a href={link} target="_blank" className="button primary">
-          Meld deg på
+          <span>Meld deg på</span>
           <Icon type="arrowRight" />
         </a>
       </div>

web/src/components/home/HomePageView.tsx

@@ -96,6 +96,9 @@ export function HomePageView({ home, events, news }: HomePageViewProps) {
               <span>Åpningstider</span>
               <Icon type="arrowRight" />
             </Link>
+            <Link href="/praktisk#apningstider" className="button">
+              <span>Åpningstider</span>
+            </Link>
           </div>
           <div className="pig">
             <Pig type="point" />

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) {

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 {

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;
-}
+}

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 <span>)
+      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,
       }
     }
   }
-}
+}