OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed comments UI regression (#20574)

Browse Source 
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.
This commit is contained in:
Daniël van der Winden 2024-07-10 11:22:14 +02:00 committed by GitHub
parent bf895e6e99
commit 13bad88baf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/comments-ui/src/components/popups/AddDetailsPopup.tsx
View File

@ -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">
<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>
}
<div className={`${isMobile() ? 'w-full' : 'w-[60%]'} p-0 sm:p-8`}>
<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">