From a27cfb6bc5e0d9f2ef6149a7a53773dec792c815 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 4 Nov 2024 16:39:20 +0100
Subject: [PATCH 1/2] Fix items

---
 src/components/Peers/Peers.css         | 10 ++++++++++
 src/components/Peers/PeersChart.css    |  1 -
 src/components/Welcome/WelcomeCard.css |  7 ++++++-
 src/components/Welcome/WelcomeCard.tsx | 26 +++++++++++++++++++++++++-
 4 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/src/components/Peers/Peers.css b/src/components/Peers/Peers.css
index 2a5c2fe..18669ad 100644
--- a/src/components/Peers/Peers.css
+++ b/src/components/Peers/Peers.css
@@ -171,4 +171,14 @@
       }
     }
   }
+
+  .peers-chart {
+    transform: scale(0.5);
+
+    @media (min-width: 1000px) {
+      & {
+        transform: scale(0.73);
+      }
+    }
+  }
 }
diff --git a/src/components/Peers/PeersChart.css b/src/components/Peers/PeersChart.css
index a500a3f..e01d60f 100644
--- a/src/components/Peers/PeersChart.css
+++ b/src/components/Peers/PeersChart.css
@@ -3,7 +3,6 @@
   width: 350px;
   height: 175px;
   overflow: hidden;
-  transform: scale(0.5);
   margin: auto;
   left: -32px;
 
diff --git a/src/components/Welcome/WelcomeCard.css b/src/components/Welcome/WelcomeCard.css
index da0eb73..bc83ce9 100644
--- a/src/components/Welcome/WelcomeCard.css
+++ b/src/components/Welcome/WelcomeCard.css
@@ -1,13 +1,18 @@
 .welcome-card {
   display: flex;
   flex-direction: column;
+  --codex-welcome-card-background-position: right;
+
+  &.welcome-card--tiny {
+    --codex-welcome-card-background-position: 450px;
+  }
 
   > div {
     padding: 16px;
     background-color: #141414;
     background-image: url(img/welcome.png);
     background-repeat: no-repeat;
-    background-position: right;
+    background-position: var(--codex-welcome-card-background-position);
     flex: 1;
     display: flex;
     flex-direction: column;
diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx
index bec3217..00b26f7 100644
--- a/src/components/Welcome/WelcomeCard.tsx
+++ b/src/components/Welcome/WelcomeCard.tsx
@@ -6,10 +6,34 @@ import { Logotype } from "../Logotype/Logotype";
 import { DiscordIcon } from "./DiscordIcon";
 import { Alert } from "@codex-storage/marketplace-ui-components";
 import { AlertIcon } from "../AlertIcon/AlertIcon";
+import { useEffect, useRef } from "react";
 
 export function WelcomeCard() {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onResize = () => {
+      const current = ref.current;
+      if (!current) {
+        return;
+      }
+
+      if (current.clientWidth > 800) {
+        current.classList.remove("welcome-card--tiny");
+      } else {
+        current.classList.add("welcome-card--tiny");
+      }
+    };
+
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [ref.current]);
+
   return (
-    <div className="welcome-card card">
+    <div className="welcome-card card" ref={ref}>
       <div className="card">
         <header>
           <div>

From 0aafc0da30cc9653c4ebe3f399d7c73f13294de4 Mon Sep 17 00:00:00 2001
From: Arnaud <arnaud@status.im>
Date: Mon, 4 Nov 2024 16:40:24 +0100
Subject: [PATCH 2/2] Fix welcome background position

---
 src/components/Welcome/WelcomeCard.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/Welcome/WelcomeCard.tsx b/src/components/Welcome/WelcomeCard.tsx
index 00b26f7..ee92998 100644
--- a/src/components/Welcome/WelcomeCard.tsx
+++ b/src/components/Welcome/WelcomeCard.tsx
@@ -7,6 +7,7 @@ import { DiscordIcon } from "./DiscordIcon";
 import { Alert } from "@codex-storage/marketplace-ui-components";
 import { AlertIcon } from "../AlertIcon/AlertIcon";
 import { useEffect, useRef } from "react";
+import { classnames } from "../../utils/classnames";
 
 export function WelcomeCard() {
   const ref = useRef<HTMLDivElement>(null);
@@ -32,8 +33,15 @@ export function WelcomeCard() {
     };
   }, [ref.current]);
 
+  const clientWidth = ref.current?.clientWidth || 0;
+
   return (
-    <div className="welcome-card card" ref={ref}>
+    <div
+      className={classnames(
+        ["welcome-card card"],
+        ["welcome-card card--tiny", clientWidth <= 800]
+      )}
+      ref={ref}>
       <div className="card">
         <header>
           <div>