Fix layout issues in MediaGallery

Co-authored-by: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>

ts/components/conversation/media-gallery/MediaGallery.dom.stories.tsx

@@ -50,10 +50,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
 });
 
 export function Populated(): JSX.Element {
-  const documents = createRandomDocuments(Date.now() - days(5), days(5)).slice(
-    0,
-    10
-  );
+  const documents = createRandomDocuments(Date.now() - days(5), days(5));
   const media = createPreparedMediaItems(createRandomMedia);
   const props = createProps({ documents, media });
 

ts/components/conversation/media-gallery/MediaGallery.dom.tsx

@@ -180,8 +180,8 @@ function MediaSection({
   });
 
   return (
-    <div className={tw('flex max-w-[660px] min-w-[360px] grow flex-col')}>
-      {sections}
+    <div className={tw('grow', 'mx-auto', 'max-w-[660px] min-w-[360px]')}>
+      <div className={tw('flex flex-col')}>{sections}</div>
     </div>
   );
 }
@@ -363,7 +363,6 @@ export function MediaGallery({
               <div
                 className={tw(
                   'grow',
-                  'flex flex-col justify-center-safe',
                   'overflow-x-hidden overflow-y-auto',
                   'p-5'
                 )}

ts/components/conversation/media-gallery/utils/mocks.std.ts

@@ -128,7 +128,7 @@ function createRandomFiles(
   timeWindow: number,
   fileExtensions: Array<string>
 ): Array<MediaItemType> {
-  return range(random(5, 10)).map(() =>
+  return range(random(5, 20)).map(() =>
     createRandomFile(
       type,
       startTime,