From 13bad88bafb6ece6180f8a00e7da95b56670b8c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Wed, 10 Jul 2024 11:22:14 +0200
Subject: [PATCH] Fixed comments UI regression (#20574)

Fixes
https://linear.app/tryghost/issue/DES-433/mobile-regression-in-comments-ui

Comments modal was previously using isMobile helper, which only works on
pageload. Code is now adjusted to use Tailwind media queries to
show/hide example profiles at the right resolutions.
---
 .../src/components/popups/AddDetailsPopup.tsx        | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx b/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
index 9cc5eea656..10c5e70abc 100644
--- a/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
+++ b/apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
@@ -118,14 +118,12 @@ const AddDetailsPopup = (props: Props) => {
     return (
         <div className="shadow-modal relative h-screen w-screen overflow-hidden rounded-none bg-white p-[28px] text-center sm:h-auto sm:w-[720px] sm:rounded-xl sm:p-0" data-testid="profile-modal" onMouseDown={stopPropagation}>
             <div className="flex">
-                {!isMobile() &&
-                    <div className={`flex w-[40%] flex-col items-center justify-center bg-[#1C1C1C]`}>
-                        <div className="mt-[-1px] flex flex-col gap-9">
-                            {renderExampleProfiles()}
-                        </div>
+                <div className={`hidden w-[50%] flex-col items-center justify-center bg-[#1C1C1C] sm:block sm:p-8`}>
+                    <div className="mt-[-1px] flex flex-col gap-9 text-left">
+                        {renderExampleProfiles()}
                     </div>
-                }
-                <div className={`${isMobile() ? 'w-full' : 'w-[60%]'} p-0 sm:p-8`}>
+                </div>
+                <div className={`p-0 sm:p-8`}>
                     <h1 className="mb-1 text-center font-sans text-[24px] font-bold tracking-tight text-black sm:text-left">{t('Complete your profile')}<span className="hidden sm:inline">.</span></h1>
                     <p className="pr-0 text-center font-sans text-base leading-9 text-neutral-500 sm:pr-10 sm:text-left">{t('Add context to your comment, share your name and expertise to foster a healthy discussion.')}</p>
                     <section className="mt-8 text-left">