From 371e1690998775fc191f7afaae857415c7ea562c Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas.wang@reddit.com>
Date: Fri, 2 May 2025 15:03:52 -0400
Subject: [PATCH 1/2] fix

---
 packages/classic-webview/src/components/header.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/classic-webview/src/components/header.tsx b/packages/classic-webview/src/components/header.tsx
index e3caca01..5d9e1494 100644
--- a/packages/classic-webview/src/components/header.tsx
+++ b/packages/classic-webview/src/components/header.tsx
@@ -42,22 +42,19 @@ export const Header = () => {
   return (
     <>
       <div className="flex items-center justify-between">
-        <div className="flex h-6 gap-2 sm:h-10 sm:gap-4">
+        <div className="flex h-6 flex-1 gap-2 sm:h-10 sm:gap-4">
           {isHardcore ? (
             <HardcoreLogo />
           ) : (
             <>
               <Logo />
               <button
-                className={cn(
-                  'flex gap-1',
-                  access.status === 'inactive' && 'cursor-pointer'
-                )}
+                className={cn('flex gap-1', access.status === 'inactive' && 'cursor-pointer')}
                 onClick={() => showModal('unlock-hardcore')}
                 disabled={access.status !== 'inactive'}
               >
                 <HardcoreMascot />
-                <span className="relative -translate-y-1/2 self-center rounded-full border border-gray-500 px-2 text-[10px] italic text-gray-400">
+                <span className="relative -translate-y-1/2 self-center whitespace-nowrap rounded-full border border-gray-500 px-2 text-[10px] italic text-gray-400">
                   {access.status === 'inactive' ? 'Pssst...' : 'Thanks for your support!'}
                   <SpeechBubbleTail className="absolute left-2 top-full h-2 w-2 stroke-gray-500 stroke-1" />
                 </span>

From 15d423d05be1a4914e2c09ab226c9eadc8b08107 Mon Sep 17 00:00:00 2001
From: Thomas Wang <thomas.wang@reddit.com>
Date: Fri, 2 May 2025 15:46:12 -0400
Subject: [PATCH 2/2] helper class

---
 packages/classic-webview/src/components/header.tsx |  2 +-
 packages/webview-common/src/components/logo.tsx    | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/classic-webview/src/components/header.tsx b/packages/classic-webview/src/components/header.tsx
index 5d9e1494..04817c61 100644
--- a/packages/classic-webview/src/components/header.tsx
+++ b/packages/classic-webview/src/components/header.tsx
@@ -42,7 +42,7 @@ export const Header = () => {
   return (
     <>
       <div className="flex items-center justify-between">
-        <div className="flex h-6 flex-1 gap-2 sm:h-10 sm:gap-4">
+        <div className="flex h-6 flex-1 gap-2 sm:h-16 sm:gap-4">
           {isHardcore ? (
             <HardcoreLogo />
           ) : (
diff --git a/packages/webview-common/src/components/logo.tsx b/packages/webview-common/src/components/logo.tsx
index b3110440..b85f0f2f 100644
--- a/packages/webview-common/src/components/logo.tsx
+++ b/packages/webview-common/src/components/logo.tsx
@@ -1,5 +1,10 @@
 export const Logo = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 321 90">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 321 90"
+    className="h-full w-auto"
+  >
     <path
       fill="#DE3232"
       d="M6.027 45.104c-1.066 0-1.877-.235-2.432-.704-.512-.512-.768-1.088-.768-1.728 0-.64.256-1.195.768-1.664.555-.47 1.366-.704 2.432-.704-1.45 0-2.432-.235-2.944-.704-.469-.47-.469-.939 0-1.408.512-.47 1.494-.704 2.944-.704-1.066 0-1.856-.235-2.368-.704-.511-.512-.767-1.088-.767-1.728 0-.64.256-1.195.768-1.664.511-.512 1.3-.768 2.367-.768-1.237 0-2.175-.363-2.816-1.088a4.16 4.16 0 0 1-.895-2.624c0-.981.298-1.835.896-2.56.64-.768 1.578-1.152 2.815-1.152-1.109 0-1.94-.384-2.496-1.152-.554-.81-.832-1.728-.832-2.752 0-1.067.278-1.984.833-2.752.554-.81 1.386-1.216 2.495-1.216-1.024-.043-1.792-.363-2.304-.96a3.587 3.587 0 0 1-.704-2.176c0-.81.256-1.515.768-2.112.513-.64 1.28-.96 2.304-.96 0-1.28.3-2.219.896-2.816.598-.64 1.28-.96 2.049-.96.768 0 1.45.32 2.048.96.597.597.896 1.536.896 2.816 0-1.195.277-2.09.832-2.688.597-.597 1.258-.896 1.984-.896.725 0 1.365.299 1.92.896.597.597.895 1.493.895 2.688 1.323-.213 2.24-.064 2.752.448.512.47.598 1.024.256 1.664-.298.64-1.109 1.067-2.431 1.28 1.45 0 2.474.405 3.072 1.216.64.768.853 1.621.64 2.56-.214.896-.832 1.557-1.856 1.984.767.128 1.386.512 1.855 1.152.512.597.811 1.259.896 1.984.854-.512 1.835-.725 2.944-.64 1.152.085 2.07.49 2.752 1.216.043-.725.342-1.195.896-1.408-.426-.768-.405-1.579.064-2.432.512-.853 1.494-1.28 2.944-1.28-1.28 0-2.24-.384-2.88-1.152-.597-.768-.896-1.664-.896-2.688 0-1.024.3-1.92.896-2.688.64-.768 1.6-1.152 2.88-1.152 0-1.067.3-1.877.896-2.432.598-.555 1.28-.832 2.049-.832.767-.043 1.45.213 2.047.768.64.555.96 1.365.96 2.432 0-1.237.235-2.176.704-2.816.47-.64 1.003-.96 1.6-.96.598 0 1.131.32 1.6.96.47.64.705 1.579.705 2.816.767-.17 1.429.021 1.983.576.555.512.94 1.195 1.153 2.048.213.853.191 1.664-.064 2.432-.214.725-.704 1.195-1.472 1.408 1.237 0 2.154.427 2.752 1.28.597.81.895 1.792.895 2.944 0 1.11-.298 2.09-.896 2.944-.597.81-1.514 1.216-2.752 1.216 1.28 0 2.22.384 2.816 1.152.64.768.96 1.664.96 2.688 0 1.024-.32 1.92-.96 2.688-.597.768-1.535 1.152-2.816 1.152 1.28 0 2.22.405 2.816 1.216.64.81.96 1.77.96 2.88a4.68 4.68 0 0 1-.96 2.88c-.597.81-1.535 1.216-2.816 1.216 1.366 0 2.262.213 2.688.64.47.384.47.79 0 1.216-.426.427-1.322.64-2.688.64.982 0 1.707.277 2.176.832.512.555.768 1.195.768 1.92 0 .683-.256 1.301-.768 1.856-.469.512-1.194.768-2.175.768.384.853.405 1.621.064 2.304a3.091 3.091 0 0 1-1.536 1.408 3.269 3.269 0 0 1-2.113.192c-.682-.17-1.215-.683-1.6-1.536.043 1.11-.298 1.941-1.024 2.496-.682.597-1.493.896-2.431.896a3.607 3.607 0 0 1-2.432-.768c-.683-.512-1.046-1.323-1.089-2.432-.853 0-1.514-.384-1.984-1.152-.469-.768-.768-1.664-.896-2.688-.085-1.067.022-2.07.32-3.008.3-.981.811-1.664 1.537-2.048-1.323.213-2.369-.128-3.137-1.024-.725-.939-1.002-1.941-.831-3.008-1.58.512-3.115.49-4.608-.064.085.512-.043.96-.384 1.344-.3.384-.747.619-1.345.704.768.555.918 1.216.448 1.984-.469.725-1.578 1.088-3.328 1.088 1.665 0 2.752.235 3.264.704.555.47.555.939 0 1.408-.512.47-1.6.704-3.264.704 1.024 0 1.793.235 2.304.704.555.47.832 1.024.832 1.664 0 .64-.277 1.216-.832 1.728-.511.47-1.28.704-2.303.704.042 1.621-.128 2.688-.512 3.2-.384.555-.79.555-1.216 0-.384-.512-.598-1.557-.64-3.136 0 1.024-.235 1.77-.704 2.24-.47.512-1.003.768-1.6.768-.598 0-1.131-.256-1.6-.768-.47-.47-.705-1.216-.705-2.24 0 1.664-.234 2.773-.704 3.328-.469.555-.938.555-1.407 0-.47-.555-.704-1.664-.704-3.328 0 1.11-.129 1.899-.385 2.368-.255.512-.554.555-.895.128-.3-.427-.576-1.387-.832-2.88-.214-1.536-.3-3.733-.256-6.592Zm61.198 7.04c-.384.81-.981 1.344-1.792 1.6-.768.213-1.621.213-2.56 0a8.859 8.859 0 0 1-2.496-1.152c-.768-.555-1.344-1.216-1.728-1.984-.341-.768-.32-1.557.064-2.368-.853.597-1.664.81-2.432.64a3.35 3.35 0 0 1-1.856-1.28c-.47-.683-.683-1.408-.64-2.176.085-.81.555-1.515 1.408-2.112a2.575 2.575 0 0 1-2.112-.704c-.555-.597-.981-1.365-1.28-2.304a9.442 9.442 0 0 1-.448-2.88c.043-.981.256-1.835.64-2.56.427-.725 1.045-1.13 1.856-1.216-.981-.043-1.75-.405-2.304-1.088-.555-.725-.917-1.579-1.088-2.56a8.878 8.878 0 0 1 .128-3.008c.256-.981.683-1.792 1.28-2.432.597-.64 1.365-.96 2.304-.96-.597-.299-.939-.81-1.024-1.536-.043-.725.085-1.515.384-2.368a9.562 9.562 0 0 1 1.216-2.368c.555-.768 1.152-1.323 1.792-1.664.64-.384 1.237-.427 1.792-.128-.81-1.067-1.13-1.941-.96-2.624.17-.683.619-1.024 1.344-1.024.725 0 1.493.533 2.304 1.6-.47-1.195-.555-2.197-.256-3.008.299-.81.81-1.344 1.536-1.6.725-.299 1.472-.256 2.24.128.81.341 1.45 1.088 1.92 2.24-.128-1.024.021-1.835.448-2.432s.981-.939 1.664-1.024c.683-.085 1.301.107 1.856.576.597.427.981 1.152 1.152 2.176.085-.981.512-1.707 1.28-2.176.81-.512 1.728-.81 2.752-.896a7.842 7.842 0 0 1 3.136.384c1.024.299 1.856.79 2.496 1.472.64.64.896 1.45.768 2.432.64-1.45 1.365-2.283 2.176-2.496.81-.213 1.387.064 1.728.832.384.725.256 1.813-.384 3.264.939-1.28 1.792-1.963 2.56-2.048.768-.085 1.216.256 1.344 1.024.128.725-.277 1.728-1.216 3.008.939-.725 1.792-1.045 2.56-.96.81.043 1.408.341 1.792.896.427.512.555 1.152.384 1.92-.17.768-.747 1.515-1.728 2.24.939-.299 1.707-.277 2.304.064.597.299.981.747 1.152 1.344.17.555.085 1.13-.256 1.728-.299.555-.917.981-1.856 1.28.81-.043 1.45.256 1.92.896.512.597.853 1.365 1.024 2.304.213.896.256 1.813.128 2.752-.128.939-.427 1.728-.896 2.368-.427.64-1.045.981-1.856 1.024 1.579 0 2.624.299 3.136.896.512.555.49 1.11-.064 1.664-.512.555-1.557.81-3.136.768 1.024.17 1.728.661 2.112 1.472.384.768.49 1.6.32 2.496-.17.896-.576 1.643-1.216 2.24-.64.555-1.472.725-2.496.512.512.47.704 1.088.576 1.856s-.47 1.557-1.024 2.368a10.015 10.015 0 0 1-1.984 2.048c-.725.597-1.45 1.003-2.176 1.216-.725.17-1.344.021-1.856-.448.256.981.021 1.835-.704 2.56-.683.725-1.579 1.237-2.688 1.536-1.11.299-2.155.32-3.136.064-.981-.256-1.6-.875-1.856-1.856.128 2.347-.619 3.52-2.24 3.52-1.621 0-4.032-1.323-7.232-3.968Zm10.56-9.536c-.981-.427-1.515-1.067-1.6-1.92-.043-.896.192-1.685.704-2.368.555-.725 1.28-1.067 2.176-1.024-.555-.299-.96-.81-1.216-1.536a5.903 5.903 0 0 1-.192-2.304c.085-.81.32-1.493.704-2.048.427-.597 1.003-.896 1.728-.896-.853.043-1.493-.299-1.92-1.024a4.203 4.203 0 0 1-.512-2.496c.128-.939.49-1.643 1.088-2.112-.81.085-1.515-.235-2.112-.96-.597-.725-.81-1.472-.64-2.24a2.124 2.124 0 0 1-1.6.256c-.512-.17-.917-.512-1.216-1.024-.17.725-.597 1.28-1.28 1.664-.683.341-1.365.405-2.048.192.213.597.235 1.237.064 1.92a3.64 3.64 0 0 1-.96 1.728c-.47.47-1.045.704-1.728.704.597.17 1.024.533 1.28 1.088.299.555.405 1.173.32 1.856a2.86 2.86 0 0 1-.64 1.664c-.341.47-.853.704-1.536.704.896-.043 1.493.085 1.792.384.299.299.299.619 0 .96-.299.299-.896.448-1.792.448 1.024-.043 1.75.213 2.176.768.47.512.64 1.11.512 1.792-.085.683-.47 1.216-1.152 1.6.725.085 1.408.512 2.048 1.28.64.768.981 1.557 1.024 2.368.597-.64 1.45-.853 2.56-.64 1.152.17 2.475.576 3.968 1.216Zm33.862 7.104c-1.152 0-2.026-.299-2.624-.896-.597-.597-.896-1.28-.896-2.048s.299-1.45.896-2.048c.598-.597 1.472-.896 2.624-.896-1.194 0-2.09-.277-2.688-.832-.597-.597-.896-1.259-.896-1.984 0-.725.299-1.365.896-1.92.598-.597 1.494-.896 2.688-.896-.981 0-1.728-.32-2.24-.96-.469-.683-.704-1.472-.704-2.368 0-.896.235-1.664.704-2.304.512-.683 1.259-1.024 2.24-1.024-1.578 0-2.645-.256-3.2-.768-.554-.512-.576-1.024-.064-1.536s1.536-.768 3.072-.768c-.981.043-1.77-.235-2.368-.832-.554-.597-.917-1.323-1.088-2.176-.128-.853-.042-1.643.256-2.368a9.832 9.832 0 0 1-.192-2.048c0 .939-.298 1.685-.896 2.24-.597.555-1.344.917-2.24 1.088-.853.17-1.728.17-2.624 0-.853-.213-1.578-.597-2.176-1.152-.554-.555-.831-1.301-.831-2.24-1.11 0-1.942-.213-2.497-.64-.554-.47-.832-1.003-.832-1.6 0-.597.278-1.13.832-1.6.555-.47 1.387-.704 2.496-.704-1.322 0-2.218-.32-2.688-.96-.426-.683-.426-1.344 0-1.984.47-.683 1.366-1.024 2.689-1.024-2.22-.981-3.222-1.685-3.009-2.112.171-.47 1.366-.213 3.584.768 0-1.408.235-2.325.704-2.752.47-.47.939-.47 1.408 0 .47.427.704 1.344.704 2.752 0-1.195.235-2.09.704-2.688.512-.597 1.088-.896 1.728-.896.64 0 1.195.299 1.664.896.512.597.768 1.493.768 2.688 0-.981.214-1.707.64-2.176.47-.512 1.003-.768 1.6-.768.64 0 1.174.256 1.6.768.47.47.704 1.195.704 2.176 0-1.536.342-2.539 1.024-3.008.683-.512 1.366-.512 2.048 0 .683.47 1.024 1.472 1.024 3.008 0-1.067.32-1.856.96-2.368.683-.555 1.451-.832 2.304-.832.896 0 1.686.277 2.368.832.683.512 1.024 1.301 1.024 2.368 0-1.237.384-2.155 1.153-2.752a3.984 3.984 0 0 1 2.624-.96c1.024 0 1.92.32 2.688.96.768.597 1.152 1.515 1.152 2.752 0-1.11.277-1.941.832-2.496.597-.597 1.258-.896 1.983-.896.768 0 1.43.299 1.985.896.554.555.832 1.387.832 2.496 1.194-.085 2.09.064 2.688.448.64.384.981.875 1.023 1.472.043.555-.213 1.088-.767 1.6-.555.47-1.43.747-2.624.832 1.279 0 2.133.299 2.56.896.426.555.426 1.13 0 1.728-.427.597-1.281.896-2.56.896.426.81.554 1.536.383 2.176-.17.64-.512 1.088-1.023 1.344-.512.256-1.088.299-1.728.128-.598-.213-1.11-.747-1.536-1.6 0 1.28-.363 2.176-1.088 2.688-.683.512-1.408.661-2.176.448a3.479 3.479 0 0 1-.769 1.984c-.426.597-.981.981-1.663 1.152 1.024.427 1.301.939.831 1.536-.469.597-1.663.896-3.584.896 1.11 0 1.92.363 2.433 1.088a4 4 0 0 1 .831 2.496 4 4 0 0 1-.831 2.496c-.513.725-1.323 1.088-2.433 1.088 1.622 0 2.689.256 3.201.768.554.512.554 1.024 0 1.536-.512.512-1.579.768-3.201.768 1.025 0 1.771.235 2.24.704.513.427.769.917.769 1.472 0 .555-.256 1.067-.769 1.536-.469.427-1.215.64-2.24.64 1.537 0 2.561.299 3.072.896.512.597.512 1.195 0 1.792-.511.597-1.535.896-3.072.896 1.537 0 2.539.213 3.009.64.512.427.512.853 0 1.28-.47.427-1.472.64-3.009.64.214.939.043 1.728-.511 2.368-.512.64-1.195 1.067-2.049 1.28-.853.213-1.664.17-2.432-.128-.768-.341-1.258-.981-1.472-1.92 0 1.195-.32 2.09-.96 2.688-.597.597-1.301.81-2.111.64-.769-.128-1.451-.661-2.049-1.6-.597-.939-.874-2.304-.832-4.096Z"
@@ -175,7 +180,12 @@ export const HardcoreMascot = () => (
 );
 
 export const HardcoreLogo = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 281 44">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 281 44"
+    className="h-full w-auto"
+  >
     <g clip-path="url(#a)">
       <path
         fill="#FF8717"