feat: Enhance scrolling behavior and styles across components; add centralized scroll utilities

Co-authored-by: Copilot <copilot@github.com>

src/app/components/media/media.css.ts

@@ -7,6 +7,7 @@ export const Image = style([
     display: 'block',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: 'inherit',
     imageRendering: 'auto',
     backfaceVisibility: 'hidden',
     transform: 'translateZ(0)',

src/app/components/message/MsgTypeRenderers.tsx

@@ -197,7 +197,7 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   }
 
   return (
-    <Attachment outlined={outlined}>
+    <Attachment outlined={outlined} transparent>
       <AttachmentBox>
         {renderImageContent({
           body: content.body || 'Image',

src/app/components/message/content/style.css.ts

@@ -8,6 +8,8 @@ export const RelativeBase = style([
     display: 'flex',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: '7px',
+    overflow: 'hidden',
   },
 ]);
 
@@ -19,6 +21,8 @@ export const AbsoluteContainer = style([
     justifyContent: 'center',
     maxWidth: '100%',
     maxHeight: '100%',
+    borderRadius: 'inherit',
+    overflow: 'hidden',
   },
 ]);