WIP css changes

Author: nikiwastaken

src/app/components/RenderMessageContent.tsx

@@ -10,7 +10,7 @@ import { useSetting } from '$state/hooks/settings';
 import { settingsAtom, CaptionPosition } from '$state/settings';
 import type { HTMLReactParserOptions } from 'html-react-parser';
 import type { Opts } from 'linkifyjs';
-import { Box, config } from 'folds';
+import { Box, config, toRem } from 'folds';
 import {
   AudioContent,
   DownloadFile,
@@ -264,14 +264,12 @@ function RenderMessageContentInternal({
         style={{
           display: 'flex',
           flexDirection: attachmentDirection,
-          width: '100%',
-          height: '100%',
         }}
       >
         <div
           style={{
-            width: '100%',
-            height: '100%',
+            // height: '100%',
+            backgroundColor: '#00AA00',
           }}
         >
           {attachment}

src/app/components/message/MGallery.css.ts

@@ -3,30 +3,23 @@ import { style } from '@vanilla-extract/css';
 import { DefaultReset, color, config, toRem } from 'folds';
 
 export const GalleryHolder = style({
-  position: 'relative',
   marginTop: config.space.S200,
 });
 
 export const GalleryItem = recipe({
   base: [
     DefaultReset,
     {
+      display: 'flex',
       maxWidth: toRem(450),
       flexShrink: 0,
+      flexGrow: 1,
       overflow: 'hidden',
       borderRadius: config.radii.R300,
+      alignSelf: 'stretch',
+      backgroundColor: '#AA00AA',
     },
   ],
-  variants: {
-    isImage: {
-      true: {
-        height: toRem(300),
-      },
-      false: {
-        maxHeight: toRem(300),
-      },
-    },
-  },
 });
 
 export const GalleryHolderGradient = recipe({

src/app/components/message/MGallery.tsx

@@ -104,10 +104,7 @@ export function MGallery({ content, renderItem, renderCaption }: MGalleryProps)
             )}
             <Box alignItems="Inherit" gap="200">
               {items.map((item, index) => (
-                <div
-                  key={item.url ?? item.file?.url ?? index}
-                  className={css.GalleryItem({ isImage: item.itemtype === MsgType.Image })}
-                >
+                <div key={item.url ?? item.file?.url ?? index} className={css.GalleryItem()}>
                   {renderItem(galleryItemToContent(item), index)}
                 </div>
               ))}

src/app/components/message/MsgTypeRenderers.tsx

@@ -447,21 +447,22 @@ export function MImage({ content, renderImageContent, outlined, fitParent }: MIm
   // this garbage is for portrait images, we cap the width so the card doesn't exceed the bounds of the image
   const displayWidth = imgH > imgW ? Math.round(MAX_SIZE * (imgW / imgH)) : MAX_SIZE;
   const height = scaleYDimension(imgInfo?.w || 400, displayWidth, imgInfo?.h || 400);
+
   return (
     <Attachment
       style={{
         flexGrow: 1,
         flexShrink: 0,
         width: fitParent ? '100%' : toRem(displayWidth),
-        height: fitParent ? '100%' : 'auto',
+        height: fitParent ? MAX_SIZE : 'auto',
       }}
       outlined={outlined}
     >
       <AttachmentBox
         style={{
           flexGrow: 1,
           aspectRatio,
-          width: fitParent ? '100%' : toRem(displayWidth),
+          width: fitParent ? 'auto' : toRem(displayWidth),
           height: fitParent ? '100%' : toRem(height < 48 ? 48 : height),
         }}
       >
@@ -524,7 +525,7 @@ export function MVideo({
         flexGrow: 1,
         flexShrink: 0,
         width: fitParent ? '100%' : toRem(displayWidth),
-        height: fitParent ? '100%' : 'auto',
+        height: fitParent ? 400 : 'auto',
       }}
       outlined={outlined}
     >
@@ -544,7 +545,7 @@ export function MVideo({
       </AttachmentHeader>
       <AttachmentBox
         style={{
-          width: fitParent ? '100%' : toRem(displayWidth),
+          width: fitParent ? 'auto' : toRem(displayWidth),
           height: fitParent ? '100%' : toRem(height < 48 ? 48 : height),
         }}
       >