From a417c213643701d0ddd015ca89b384a429c6d5ed Mon Sep 17 00:00:00 2001
From: Andreas Helms <andreashelms@MacBook-Pro-von-Andreas.local>
Date: Tue, 7 Jan 2025 16:08:56 +0100
Subject: [PATCH] feat(poi-details): align poi icon on details page

---
 app/component/CardHeader.js                   | 11 +++++++++--
 app/component/StopCardHeader.js               |  5 ++++-
 app/component/map/sidebar/SidebarContainer.js |  1 +
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/app/component/CardHeader.js b/app/component/CardHeader.js
index c693a84697..193090e50c 100644
--- a/app/component/CardHeader.js
+++ b/app/component/CardHeader.js
@@ -30,6 +30,7 @@ const CardHeader = (
     showHeaderTitle,
     headerPictureUrl,
     showCardSubHeader = true,
+    isMobile,
   },
   { config, intl },
 ) => {
@@ -65,8 +66,13 @@ const CardHeader = (
         <div className="card-header-content">
           {icon || dataURI ? (
             <div
-              className="left"
-              style={{ fontSize: 32, paddingRight: 10, height: 32 }}
+              className="left card-header-icon-container"
+              style={{
+                fontSize: 32,
+                paddingRight: 10,
+                height: 32,
+                transform: !isMobile ? 'translateY(12px)' : 'initial',
+              }}
             >
               <Icon
                 img={icon}
@@ -139,6 +145,7 @@ CardHeader.propTypes = {
   isTerminal: PropTypes.bool,
   showHeaderTitle: PropTypes.bool,
   showCardSubHeader: PropTypes.bool,
+  isMobile: PropTypes.bool,
 };
 
 CardHeader.defaultProps = {
diff --git a/app/component/StopCardHeader.js b/app/component/StopCardHeader.js
index 56ec426e2f..dff1c2d85e 100644
--- a/app/component/StopCardHeader.js
+++ b/app/component/StopCardHeader.js
@@ -91,6 +91,8 @@ class StopCardHeader extends React.Component {
       return false;
     }
 
+    const isMobile = breakpoint !== 'large';
+
     return (
       <CardHeader
         className={className}
@@ -98,12 +100,13 @@ class StopCardHeader extends React.Component {
         description={this.getDescription()}
         code={this.headerConfig.showStopCode && stop.code ? stop.code : null}
         icons={icons}
-        showBackButton={breakpoint === 'large'}
+        showBackButton={!isMobile}
         stop={stop}
         headerConfig={this.headerConfig}
         isTerminal={isTerminal}
         showHeaderTitle
         showCardSubHeader
+        isMobile={isMobile}
         // TODO: Fix places geocoder api request to reimplement favorite button.
         // https://github.com/stadtnavi/digitransit-ui/issues/481
         /** favouriteContainer={
diff --git a/app/component/map/sidebar/SidebarContainer.js b/app/component/map/sidebar/SidebarContainer.js
index 6f9097d9f6..31de7c14fb 100644
--- a/app/component/map/sidebar/SidebarContainer.js
+++ b/app/component/map/sidebar/SidebarContainer.js
@@ -69,6 +69,7 @@ const SidebarContainer = (
           description={description}
           showCardSubHeader={Boolean(description)}
           showBackButton={!isMobile}
+          isMobile={isMobile}
         />
         {children}
         {location && (