fix: mf-4181 add padding bottom for RSS3 feed detail dialog (#9618)

DimensionDev · May 17, 2023 · 15fbc51 · 15fbc51
1 parent b128c4a
commit 15fbc51
Showing 1 changed file with 34 additions and 30 deletions.
diff --git a/packages/plugins/RSS3/src/SNSAdaptor/components/DetailsDialog/index.tsx b/packages/plugins/RSS3/src/SNSAdaptor/components/DetailsDialog/index.tsx
@@ -18,17 +18,19 @@ const useStyles = makeStyles()((theme) => ({
     content: {
         display: 'flex',
         flexDirection: 'column',
-        paddingRight: 15,
+        paddingBottom: theme.spacing(3),
+    },
+    details: {
+        overflow: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
         '::-webkit-scrollbar': {
-            backgroundColor: 'transparent',
-            width: 5,
-        },
-        '::-webkit-scrollbar-thumb': {
-            borderRadius: '5px',
-            width: 5,
-            border: '5px solid transparent',
-            backgroundColor: theme.palette.maskColor.secondaryLine,
+            display: 'none',
         },
+        '::-webkit-scrollbar-thumb': {},
+    },
+    card: {
+        flexGrow: 1,
     },
     links: {
         display: 'flex',
@@ -76,27 +78,29 @@ export function FeedDetailsDialog({ type, feed, onClose, actionIndex, onSubmit,
                 onSubmit?.()
             }}>
             <DialogContent className={classes.content}>
-                <FeedCard feed={feed} actionIndex={actionIndex} verbose />
-                {links?.length ? (
-                    <div className={classes.links}>
-                        {links.map((link, index) => {
-                            let host = ''
-                            try {
-                                const url = new URL(link)
-                                if (!['http:', 'https:'].includes(url.protocol)) return null
-                                host = url.host
-                            } catch {}
-                            const Icon = hostIconMap[host] ?? Icons.SettingsLanguage
-                            const name = hostNameMap[host] ?? host
-                            return (
-                                <Linking key={index} LinkProps={{ className: classes.link }} href={link}>
-                                    <Icon size={24} />
-                                    <Typography className={classes.linkLabel}>{name}</Typography>
-                                </Linking>
-                            )
-                        })}
-                    </div>
-                ) : null}
+                <div className={classes.details}>
+                    <FeedCard className={classes.card} feed={feed} actionIndex={actionIndex} verbose />
+                    {links?.length ? (
+                        <div className={classes.links}>
+                            {links.map((link, index) => {
+                                let host = ''
+                                try {
+                                    const url = new URL(link)
+                                    if (!['http:', 'https:'].includes(url.protocol)) return null
+                                    host = url.host
+                                } catch {}
+                                const Icon = hostIconMap[host] ?? Icons.SettingsLanguage
+                                const name = hostNameMap[host] ?? host
+                                return (
+                                    <Linking key={index} LinkProps={{ className: classes.link }} href={link}>
+                                        <Icon size={24} />
+                                        <Typography className={classes.linkLabel}>{name}</Typography>
+                                    </Linking>
+                                )
+                            })}
+                        </div>
+                    ) : null}
+                </div>
             </DialogContent>
         </InjectedDialog>
     )