CSS demo fixes

Author: Dominik Piatek

demo/src/App.tsx

@@ -21,7 +21,7 @@ const App = () => {
   }, [space, self?.profileData.name]);
 
   return (
-    <>
+    <div className="min-w-[375px]">
       <Header
         self={self}
         others={others}
@@ -44,7 +44,7 @@ const App = () => {
           <AblySvg className="ml-2" />
         </a>
       </div>
-    </>
+    </div>
   );
 };
 

demo/src/components/Avatar.tsx

@@ -26,7 +26,7 @@ export const Avatar = ({
   return (
     <div
       className={cn(
-        'rounded-full group relative flex items-center justify-center xs:h-[32px] xs:w-[32px] md:h-[46px] md:w-[46px]',
+        'rounded-full group relative flex items-baseline md:items-center justify-center h-[36px] w-[36px] md:h-[46px] md:w-[46px]',
         {
           'bg-gradient-to-b from-yellow-400 to-yellow-500 ': isSelf,
           'bg-white': !isSelf && !isInContent,
@@ -39,15 +39,15 @@ export const Avatar = ({
 
       <div
         className={cn(
-          'rounded-full flex items-center justify-center xs:h-[32px] xs:w-[32px] md:h-[40px] md:w-[40px] bg-gradient-to-tr',
+          'rounded-full flex items-center justify-center h-[32px] w-[32px] md:h-[40px] md:w-[40px] bg-gradient-to-tr',
           profileData.color.gradientStart.tw,
           profileData.color.gradientEnd.tw,
         )}
         data-id="avatar-inner-wrapper"
       >
         <p
           data-id="name"
-          className="font-medium text-sm text-white"
+          className="font-medium text-xs md:text-sm text-white"
         >
           {initials}
         </p>

demo/src/components/AvatarStack.tsx

@@ -36,7 +36,7 @@ export const AvatarStack = ({ isInContent = false, avatars }: Props) => {
         <li>
           <div
             className={cn(
-              'h-[46px] w-[46px] rounded-full flex items-center justify-center bg-white ml-[-9px] relative group',
+              'h-[36px] w-[36px] md:h-[46px] md:w-[46px] rounded-full flex items-baseline md:items-center justify-center bg-white ml-[-9px] relative group',
               {
                 'bg-white': !isInContent,
                 'bg-[#F7F6F9]': isInContent,
@@ -45,10 +45,10 @@ export const AvatarStack = ({ isInContent = false, avatars }: Props) => {
             data-id="avatar-wrapper"
           >
             <div
-              className="h-[40px] w-[40px] rounded-full flex items-center justify-center bg-[#75A3E3]"
+              className="h-[32px] w-[32px] md:h-[40px] md:w-[40px] rounded-full flex items-center justify-center bg-[#75A3E3]"
               data-id="avatar-inner-wrapper"
             >
-              <p className="font-medium text-sm text-white">
+              <p className="font-medium text-xs md:text-sm text-white">
                 +<span data-id="count">{hiddenAvatars.length}</span>
               </p>
             </div>

demo/src/components/Header.tsx

@@ -14,22 +14,23 @@ export const Header = ({ self, others }: Props) => {
       id="main-header"
       className="bg-white"
     >
-      <div className="mx-auto justify-between grid grid-rows-2 grid-cols-2 md:max-w-screen-2xl md:px-16 md:flex md:items-center">
-        <section className="py-4">
+      <div className="mx-auto justify-between grid grid-rows-2 grid-cols-2 max-w-screen-2xl md:px-8 lg:px-16 md:flex md:items-center">
+        <section className="py-4 shrink-0 mr-4">
           <p className="font-semibold pl-8 md:text-2xl">Team Argo</p>
           <p className="leading-5 pl-8">Pitch deck</p>
         </section>
 
-        <section className="ml-auto flex group relative pr-8 py-4">
-          <InfoSvg className="text-ably-black" />
-          <p className="ml-2 xs:text-sm md:font-medium md:text-base">How to try this demo</p>
-          <div className="group-hover p-4 bg-[#FAFAFB] rounded-lg hidden group-hover:block absolute top-full mt-2 w-[300px] -left-[70%] border border-[#D9D9DA] text-xs md:text-sm z-20">
+        <section className="ml-auto group relative pr-8 py-4 group-hover cursor-pointer flex">
+          <InfoSvg className="text-ably-black self-center shrink-0" />
+          <p className="ml-2 font-medium text-sm lg:text-base self-center">How to try this demo</p>
+          <div className="p-4 bg-[#FAFAFB] rounded-lg hidden group-hover:block absolute top-[50px] mt-2 w-[300px] -left-[100px] md:-left-[50px] border border-[#D9D9DA] text-sm z-20">
             Open this page in multiple windows or share the URL with your team to try out the live avatar stack.
           </div>
         </section>
+
         <section
           id="avatar-stack-container"
-          className="flex justify-end col-span-2 xs:border-t xs:border-[#D9D9DA] xs:ml-0 xs:pr-8 md:ml-8 md:border-t-0 py-4"
+          className="flex justify-end items-baseline col-span-2 border-t border-[#D9D9DA] md:border-t-0 p-4"
         >
           <>
             {self && (
@@ -42,11 +43,11 @@ export const Header = ({ self, others }: Props) => {
           </>
         </section>
 
-        <section className="xs:hidden md:ml-[24px] md:flex md:items-center">
+        <section className="hidden md:flex md:items-center">
           <a
             href="https://github.com/ably-labs/spaces"
             target="_blank"
-            className="flex items-center px-5 py-[14px] justify-start"
+            className="flex items-center px-5 py-[14px] justify-start shrink-0 block"
             rel="noreferrer"
           >
             <p className="font-medium text-base">Space API</p>
@@ -55,7 +56,7 @@ export const Header = ({ self, others }: Props) => {
 
           <a
             href="https://docs.google.com/forms/d/e/1FAIpQLSer2ujLNw0rlrf2FvfIhLxyiWuuvTwYkDDqHmv30F8Cs00YWg/viewform"
-            className="text-white bg-ably-black rounded-md py-[11px] px-5 leading-[1.125] md:text-xs lg:text-base inline-block lg:ml-[24px]"
+            className="block w-[100px] text-white bg-ably-black rounded-md py-[11px] px-5 leading-[1.125] md:text-xs lg:text-base lg:ml-[24px] shrink-0 hidden lg:block"
           >
             Sign Up
           </a>

demo/src/components/Image.tsx

@@ -18,15 +18,17 @@ export const Image = ({ src, children, className, id, slide }: Props) => {
   const outlineClasses = getOutlineClasses(activeMember);
 
   return (
-    <div className={cn('relative xs:my-4 md:my-0', className)}>
+    <div
+      data-before={name}
+      className={cn('relative xs:my-4 md:my-0', className, {
+        [`outline-2 outline before:content-[attr(data-before)] before:absolute before:-top-[22px] before:-left-[2px] before:px-[10px] before:text-sm before:text-white before:rounded-t-lg before:normal-case ${outlineClasses}`]:
+          !!activeMember,
+      })}
+    >
       <img
         id={id}
-        data-before={name}
         data-id="slide-image-placeholder"
-        className={cn('cursor-pointer', {
-          [`outline-2 outline before:content-[attr(data-before)] before:absolute before:-top-[22px] before:-left-[2px] before:px-[10px] before:text-sm before:text-white before:rounded-t-lg before:normal-case ${outlineClasses}`]:
-            !!activeMember,
-        })}
+        className="cursor-pointer block"
         src={src}
         onClick={handleSelect}
       />

demo/src/components/Paragraph.tsx

@@ -22,7 +22,7 @@ export const Paragraph = ({ variant = 'regular', id, slide, className, ...props
       className={cn(
         'text-ably-avatar-stack-demo-slide-text cursor-pointer relative',
         {
-          'xs:w-auto xs:text-xs xs:my-4 md:my-0 md:text-lg': variant === 'regular',
+          'xs:w-auto text-xs xs:text-base md:text-lg xs:my-4 md:my-0': variant === 'regular',
           'text-[13px] p-0 leading-6': variant === 'aside',
           [`outline-2 outline before:content-[attr(data-before)] before:absolute before:-top-[22px] before:-left-[2px] before:px-[10px] before:text-sm before:text-white before:rounded-t-lg before:normal-case ${outlineClasses}`]:
             !!activeMember,

demo/src/components/SlideMenu.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 export const SlideMenu = ({ slides }: Props) => {
   return (
-    <menu className="w-[300px] h-0 xs:hidden md:block">
+    <menu className="w-[300px] h-0 hidden md:block">
       <ol
         id="slide-left-preview-list"
         className="relative top-[68px] -left-[26px] flex flex-col scale-[0.2] w-[20%] h-[20%] max-h-[80vh]"

demo/src/components/Title.tsx

@@ -23,7 +23,7 @@ export const Title = ({ variant = 'h1', className, id, slide, ...props }: Props)
       className={cn(
         'relative cursor-pointer',
         {
-          'font-semibold text-ably-avatar-stack-demo-slide-text my-2 xs:text-2xl md:text-4xl': variant === 'h1',
+          'font-semibold text-ably-avatar-stack-demo-slide-text my-2 xs:text-3xl md:text-4xl': variant === 'h1',
           'font-semibold text-ably-avatar-stack-demo-slide-text md:text-2xl': variant === 'h2',
           'font-medium uppercase text-ably-avatar-stack-demo-slide-title-highlight xs:text-xs xs:my-4 md:my-0 md:text-md':
             variant === 'h3',

demo/src/components/slides.tsx

@@ -28,7 +28,7 @@ export const slides = [
             id="3"
             slide="0"
           >
-            <div className="absolute top-5 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto">
+            <div className="absolute w-[176px] left-[20px] top-[86px] md:top-20 md:left-6 md:right-6 md:mx-auto">
               <Title
                 variant="h2"
                 id="4"
@@ -50,7 +50,7 @@ export const slides = [
             id="6"
             slide="0"
           >
-            <div className="absolute top-3 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto">
+            <div className="absolute w-[176px] left-[20px] top-[86px] md:top-20 md:left-6 md:right-6 md:mx-auto">
               <Title
                 variant="h2"
                 id="7"
@@ -74,7 +74,7 @@ export const slides = [
           >
             <div
               data-id="slide-figcaption-placeholder"
-              className="absolute top-3 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto"
+              className="absolute w-[176px] left-[20px] top-[86px] md:top-20 md:left-6 md:right-6 md:mx-auto"
             >
               <Title
                 variant="h2"
@@ -99,7 +99,7 @@ export const slides = [
           >
             <div
               data-id="slide-figcaption-placeholder"
-              className="absolute top-3 scale-50 md:scale-100 w-[176px] -left-8 md:top-20 md:left-6 md:right-6 md:mx-auto"
+              className="absolute w-[176px] left-[20px] top-[86px] md:top-20 md:left-6 md:right-6 md:mx-auto"
             >
               <Title
                 variant="h2"
@@ -134,7 +134,7 @@ export const slides = [
           </Title>
           <Title
             variant="h1"
-            className="mb-12"
+            className="md:mb-12"
             id="2"
             slide="1"
           >
@@ -172,7 +172,7 @@ export const slides = [
         <div>
           <Title
             variant="h1"
-            className="mb-12"
+            className="md:mb-12"
             id="1"
             slide="2"
           >