🐛(frontend) remove horizontal line when no elements

When no elements are present in the doc share
modals, a horizontal line is still displayed.
This PR removes this line when there are no elements
to display.

Author: AntoLC

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareAccessRequest.tsx

@@ -11,6 +11,7 @@ import { createGlobalStyle, css } from 'styled-components';
 import {
   Box,
   BoxButton,
+  HorizontalSeparator,
   Icon,
   LoadMoreText,
   Loading,
@@ -165,19 +166,25 @@ export const QuickSearchGroupAccessRequest = ({
   }
 
   return (
-    <Box
-      aria-label={t('List request access card')}
-      className="--docs--share-access-request"
-      $padding={{ horizontal: 'base' }}
-    >
-      <QuickSearchGroupAccessRequestStyle />
-      <QuickSearchGroup
-        group={accessRequestsData}
-        renderElement={(accessRequest) => (
-          <DocShareAccessRequestItem doc={doc} accessRequest={accessRequest} />
-        )}
-      />
-    </Box>
+    <>
+      <Box
+        aria-label={t('List request access card')}
+        className="--docs--share-access-request"
+        $padding={{ horizontal: 'base' }}
+      >
+        <QuickSearchGroupAccessRequestStyle />
+        <QuickSearchGroup
+          group={accessRequestsData}
+          renderElement={(accessRequest) => (
+            <DocShareAccessRequestItem
+              doc={doc}
+              accessRequest={accessRequest}
+            />
+          )}
+        />
+      </Box>
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
+    </>
   );
 };
 

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareInvitation.tsx

@@ -6,7 +6,14 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { Box, BoxButton, Icon, LoadMoreText, Text } from '@/components';
+import {
+  Box,
+  BoxButton,
+  HorizontalSeparator,
+  Icon,
+  LoadMoreText,
+  Text,
+} from '@/components';
 import { QuickSearchData, QuickSearchGroup } from '@/components/quick-search';
 import { useCunninghamTheme } from '@/cunningham';
 import { Doc, Role } from '@/docs/doc-management';
@@ -162,16 +169,19 @@ export const QuickSearchGroupInvitation = ({
   }
 
   return (
-    <Box
-      aria-label={t('List invitation card')}
-      $padding={{ horizontal: 'base' }}
-    >
-      <QuickSearchGroup
-        group={invitationsData}
-        renderElement={(invitation) => (
-          <DocShareInvitationItem doc={doc} invitation={invitation} />
-        )}
-      />
-    </Box>
+    <>
+      <Box
+        aria-label={t('List invitation card')}
+        $padding={{ horizontal: 'base' }}
+      >
+        <QuickSearchGroup
+          group={invitationsData}
+          renderElement={(invitation) => (
+            <DocShareInvitationItem doc={doc} invitation={invitation} />
+          )}
+        />
+      </Box>
+      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
+    </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx

@@ -291,9 +291,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
                   {showMemberSection && isRootDoc && (
                     <Box $padding={{ top: 'base' }}>
                       <QuickSearchGroupAccessRequest doc={doc} />
-                      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
                       <QuickSearchGroupInvitation doc={doc} />
-                      <HorizontalSeparator $margin={{ vertical: 'sm' }} />
                       <QuickSearchGroupMember doc={doc} />
                     </Box>
                   )}