Fix layout issues

frontend/src/core/components/annotation/shared/ImageUploader.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FileInput, Text, Stack } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { PrivateContent } from '@app/components/shared/PrivateContent';
 
 interface ImageUploaderProps {
   onImageChange: (file: File | null) => void;
@@ -40,13 +41,15 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
 
   return (
     <Stack gap="sm">
-      <FileInput
-        label={label || t('sign.image.label', 'Upload signature image')}
-        placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
-        accept="image/*"
-        onChange={handleImageChange}
-        disabled={disabled}
-      />
+      <PrivateContent>
+        <FileInput
+          label={label || t('sign.image.label', 'Upload signature image')}
+          placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
+          accept="image/*"
+          onChange={handleImageChange}
+          disabled={disabled}
+        />
+      </PrivateContent>
       <Text size="sm" c="dimmed">
         {hint || t('sign.image.hint', 'Upload an image of your signature')}
       </Text>

frontend/src/core/components/shared/PrivateContent.tsx

@@ -1,42 +1,40 @@
 import React from 'react';
 
-type PrivateContentProps = {
+interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
-  as?: 'span' | 'div';
-} & (
-  | React.HTMLAttributes<HTMLSpanElement>
-  | React.HTMLAttributes<HTMLDivElement>
-);
+}
 
 /**
  * Wrapper component for content that should not be captured by analytics tools.
  * Currently applies the 'ph-no-capture' className to prevent PostHog capture.
  *
+ * Uses `display: contents` to be layout-invisible - the wrapper exists in the DOM
+ * for analytics filtering, but doesn't affect layout, flexbox, grid, or styling.
+ *
  * Use this component to wrap any content containing sensitive or private information
  * that should be excluded from analytics tracking.
  *
  * @example
- * // For inline content (default):
  * <PrivateContent>
  *   <Text>Sensitive filename.pdf</Text>
  * </PrivateContent>
  *
- * // For block-level content:
- * <PrivateContent as="div">
- *   <div style={{ height: '100%' }}>Block content</div>
+ * <PrivateContent>
+ *   <img src={thumbnail} alt="preview" />
  * </PrivateContent>
  */
 export const PrivateContent: React.FC<PrivateContentProps> = ({
   children,
-  as: Component = 'span',
   className = '',
+  style,
   ...props
 }) => {
   const combinedClassName = `ph-no-capture${className ? ` ${className}` : ''}`;
+  const combinedStyle = { display: 'contents' as const, ...style };
 
   return (
-    <Component className={combinedClassName} {...props}>
+    <span className={combinedClassName} style={combinedStyle} {...props}>
       {children}
-    </Component>
+    </span>
   );
 };

frontend/src/core/components/viewer/LocalEmbedPDF.tsx

@@ -185,7 +185,7 @@ export function LocalEmbedPDF({ file, url, enableAnnotations = false, onSignatur
 
   // Wrap your UI with the <EmbedPDF> provider
   return (
-    <PrivateContent as="div">
+    <PrivateContent>
       <div
         style={{
           height: '100%',