fix(ui): native inputs/checkboxes, QR fallback, focus + report modal cleanup

- N23 RoomServerACL: raw text input -> folds Input; raw checkbox -> folds Checkbox
- N24 PolicyListViewer: raw room-id input -> folds Input (Critical variant on error)
- N25 ExportRoomHistory: raw <input type="date"> x2 -> folds Input
- N26 RoomShareInvite: QR <img> gets loading="lazy" + onError fallback card
  ("QR code unavailable") instead of a broken-image icon
- N27 GifPicker: FocusTrap returnFocusOnDeactivate:false (matches EmojiBoard)
- N76 Report modals: drop redundant Cancel button (dismiss via header x /
  click-outside, like MessageReportItem)
- N5 ReadReceiptAvatars: hover/focus moved to co-located css :hover/:focus-visible
  (removed JS onMouseEnter/Leave .style mutation)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/app/features/common-settings/general/RoomShareInvite.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Box, Button, color, config, Icon, Icons, Text } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -12,6 +12,7 @@ export function RoomShareInvite() {
   const mx = useMatrixClient();
   const room = useRoom();
   const [copied, setCopied] = useState(false);
+  const [qrError, setQrError] = useState(false);
 
   const domain = mx.getDomain() ?? undefined;
   const inviteUrl = getMatrixToRoom(room.roomId, domain ? [domain] : undefined);
@@ -63,13 +64,35 @@ export function RoomShareInvite() {
             </Box>
           </Box>
           <Box justifyContent="Center">
-            <img
-              src={qrSrc}
-              alt="QR code for room invite link"
-              width={160}
-              height={160}
-              style={{ display: 'block', borderRadius: config.radii.R300 }}
-            />
+            {qrError ? (
+              <Box
+                direction="Column"
+                alignItems="Center"
+                justifyContent="Center"
+                gap="100"
+                style={{
+                  width: 160,
+                  height: 160,
+                  borderRadius: config.radii.R300,
+                  background: color.SurfaceVariant.Container,
+                }}
+              >
+                <Icon size="400" src={Icons.Warning} />
+                <Text size="T200" priority="300" align="Center">
+                  QR code unavailable
+                </Text>
+              </Box>
+            ) : (
+              <img
+                src={qrSrc}
+                alt="QR code for room invite link"
+                width={160}
+                height={160}
+                loading="lazy"
+                onError={() => setQrError(true)}
+                style={{ display: 'block', borderRadius: config.radii.R300 }}
+              />
+            )}
           </Box>
         </Box>
       </CutoutCard>