Align card list styling with rest of lists

src/modules/extension/components/ExtensionCard.tsx

@@ -192,13 +192,7 @@ export function ExtensionCard(props: IProps) {
                 </Box>
                 {isInstalled && (
                     <CustomTooltip title={t('settings.title')}>
-                        <IconButton
+                        <IconButton onClick={showOptions} color="inherit">
-                            onClick={showOptions}
-                            aria-label="display more actions"
-                            edge="end"
-                            color="inherit"
-                            size="large"
-                        >
                             <SettingsIcon />
                         </IconButton>
                     </CustomTooltip>

src/modules/extension/components/ExtensionOptions.tsx

@@ -17,6 +17,7 @@ import { useNavigate } from 'react-router-dom';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
+import { useMemo } from 'react';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
 import { LoadingPlaceholder } from '@/modules/core/components/placeholder/LoadingPlaceholder';
@@ -25,9 +26,11 @@ import { getErrorMessage } from '@/lib/HelperFunctions';
 import { CustomTooltip } from '@/modules/core/components/CustomTooltip';
 import { AppRoutes } from '@/modules/core/AppRoute.constants';
 import { translateExtensionLanguage } from '@/modules/extension/Extensions.utils';
+import { StyledGroupItemWrapper } from '@/modules/core/components/virtuoso/StyledGroupItemWrapper.tsx';
+import { TExtension } from '@/modules/extension/Extensions.types.ts';
 
 interface IExtensionOptions {
-    extensionId: string | undefined;
+    extensionId: TExtension['pkgName'] | undefined;
     closeDialog: () => void;
 }
 
@@ -46,10 +49,14 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
         return <Dialog open={!!extensionId} onClose={closeDialog} />;
     }
 
-    const relevantSources = data?.sources.nodes.filter((s) => s.extension.pkgName === extensionId);
+    const relevantSources = useMemo(() => {
+        if (!extensionId) return [];
 
+        return data?.sources.nodes.filter((source) => source.extension.pkgName === extensionId);
+    }, [data?.sources.nodes, extensionId]);
+    console.log('@asdf', extensionId, relevantSources);
     return (
-        <Dialog open={!!extensionId} onClose={closeDialog}>
+        <Dialog open={!!extensionId} onClose={closeDialog} maxWidth="md" fullWidth>
             <DialogTitle>{t('extension.settings.dialog.title')}</DialogTitle>
             <DialogContent>
                 {isLoading && <LoadingPlaceholder />}
@@ -61,15 +68,10 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
                     />
                 )}
                 {!isLoading && !error && (
-                    <Box
+                    <Box>
-                        sx={{
-                            pb: 2,
-                            pt: 2,
-                            mx: 2,
-                        }}
-                    >
                         {relevantSources?.map((source) => (
-                            <Card key={source.id}>
+                            <StyledGroupItemWrapper key={source.id} sx={{ px: 0 }}>
+                                <Card>
                                     <CardContent
                                         sx={{
                                             display: 'flex',
@@ -88,12 +90,11 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
                                             <CustomTooltip title={t('settings.title')}>
                                                 <IconButton
                                                     onClick={() =>
-                                                    navigate(AppRoutes.sources.childRoutes.configure.path(source.id))
+                                                        navigate(
+                                                            AppRoutes.sources.childRoutes.configure.path(source.id),
+                                                        )
                                                     }
-                                                aria-label="display more actions"
-                                                edge="end"
                                                     color="inherit"
-                                                size="large"
                                                 >
                                                     <SettingsIcon />
                                                 </IconButton>
@@ -101,6 +102,7 @@ export function ExtensionOptions({ extensionId, closeDialog }: IExtensionOptions
                                         )}
                                     </CardContent>
                                 </Card>
+                            </StyledGroupItemWrapper>
                         ))}
                     </Box>
                 )}

src/modules/extension/screens/Extensions.tsx

@@ -36,7 +36,12 @@ import {
     isExtensionStateOrLanguage,
     translateExtensionLanguage,
 } from '@/modules/extension/Extensions.utils.ts';
-import { ExtensionAction, ExtensionGroupState, ExtensionState } from '@/modules/extension/Extensions.types.ts';
+import {
+    ExtensionAction,
+    ExtensionGroupState,
+    ExtensionState,
+    TExtension,
+} from '@/modules/extension/Extensions.types.ts';
 import { EXTENSION_ACTION_TO_FAILURE_TRANSLATION_KEY_MAP } from '@/modules/extension/Extensions.constants.ts';
 import { AppRoutes } from '@/modules/core/AppRoute.constants.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
@@ -50,9 +55,10 @@ export function Extensions({ tabsMenuHeight }: { tabsMenuHeight: number }) {
     const { t } = useTranslation();
     const { setAction } = useNavBarContext();
     const navigate = useNavigate();
-    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: string }>();
+    const { pathname, search, state } = useLocation<{ selectedExtensionPkg?: TExtension['pkgName'] }>();
     const selectedExtensionPkg = state?.selectedExtensionPkg;
-    const setSelectedExtensionPkg = (newPkg: string | undefined) => {
+
+    const setSelectedExtensionPkg = (newPkg: TExtension['pkgName'] | undefined) => {
         navigate(pathname + search, {
             replace: true,
             state: {