Profile: hide email pagination controls when no other pages (#1764)

* make add email button small

* hide pagination when only one page of emails

* add autohide to paginationcontrols

frontend/src/components/PaginationControls.tsx

@@ -17,6 +17,8 @@ import { Button } from "@vector-im/compound-web";
 type Props = {
   onNext: (() => void) | null;
   onPrev: (() => void) | null;
+  // automatically hide the component when there are no onNext/onPrev
+  autoHide?: boolean;
   count?: number;
   disabled?: boolean;
 };
@@ -24,9 +26,13 @@ type Props = {
 const PaginationControls: React.FC<Props> = ({
   onNext,
   onPrev,
+  autoHide,
   count,
   disabled,
 }) => {
+  if (autoHide && !onNext && !onPrev) {
+    return null;
+  }
   return (
     <div className="grid items-center grid-cols-3 gap-2">
       <Button

frontend/src/components/UserProfile/AddEmailForm.tsx

@@ -113,7 +113,9 @@ const AddEmailForm: React.FC<{
           <Label>Add email</Label>
           <Control disabled={pending} inputMode="email" ref={fieldRef} />
         </Field>
-        <Submit disabled={pending}>Add</Submit>
+        <Submit size="sm" disabled={pending}>
+          Add
+        </Submit>
       </Root>
     </>
   );

frontend/src/components/UserProfile/UserEmailList.tsx

@@ -160,12 +160,6 @@ const UserEmailList: React.FC<{
   return (
     <BlockList>
       <H3>Emails</H3>
-      <PaginationControls
-        count={result.data?.user?.emails?.totalCount ?? 0}
-        onPrev={prevPage ? (): void => paginate(prevPage) : null}
-        onNext={nextPage ? (): void => paginate(nextPage) : null}
-        disabled={pending}
-      />
       {showNoPrimaryEmailAlert && (
         <Alert type="critical" title="No primary email address" />
       )}
@@ -178,6 +172,14 @@ const UserEmailList: React.FC<{
           onRemove={onRemove}
         />
       ))}
+
+      <PaginationControls
+        autoHide
+        count={result.data?.user?.emails?.totalCount ?? 0}
+        onPrev={prevPage ? (): void => paginate(prevPage) : null}
+        onNext={nextPage ? (): void => paginate(nextPage) : null}
+        disabled={pending}
+      />
       <AddEmailForm userId={userId} onAdd={onAdd} />
     </BlockList>
   );