Harsh/fix layout shift on loading ss (#5184)

* fix: layout shift in ss apps page

* Fix for mobile style justify-center

Co-authored-by: root <root@pop-os.localdomain>
Co-authored-by: Alan <alannnc@gmail.com>

apps/web/components/v2/apps/App.tsx

@@ -68,7 +68,7 @@ const Component = ({
   return (
     <div className="relative flex-1 flex-col items-start justify-start px-4 md:flex md:px-8 lg:flex-row lg:px-0">
       {hasImages && (
-        <div className="flex-2 mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100  p-4 md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:rounded-md">
+        <div className="align-center mb-4 -ml-4 -mr-4 flex min-h-[450px] w-auto basis-3/5 snap-x snap-mandatory flex-row overflow-auto whitespace-nowrap bg-gray-100 p-4  md:mb-8 md:-ml-8 md:-mr-8 md:p-8 lg:mx-0 lg:mb-0 lg:max-w-2xl lg:flex-col lg:justify-center lg:rounded-md">
           {images ? (
             images.map((img) => (
               <img
@@ -85,7 +85,7 @@ const Component = ({
       )}
       <div
         className={classNames(
-          "sticky top-0 -mt-4 max-w-xl flex-1 pb-12 text-sm lg:pb-0",
+          "sticky top-0 -mt-4 max-w-xl basis-2/5 pb-12 text-sm lg:pb-0",
           hasImages && "lg:ml-8"
         )}>
         <div className="mb-8 flex pt-4">