Move user select first in export annotations dialog

src/sidebar/components/ShareDialog/ExportAnnotations.tsx

@@ -210,7 +210,7 @@ function ExportAnnotations({
     >
       {exportableAnnotations.length > 0 ? (
         <>
-          <p className="text-color-text-light mb-3">
+          <p className="text-color-text-light">
             <Link
               variant="text-light"
               underline="always"
@@ -221,6 +221,30 @@ function ExportAnnotations({
             </Link>{' '}
             about copying and exporting annotations.
           </p>
+          <div className="flex flex-col gap-y-3">
+            <label htmlFor={userSelectId} className="font-medium">
+              Select which user{"'"}s annotations to export:
+            </label>
+            <SelectNext
+              value={selectedUser}
+              onChange={setSelectedUser}
+              buttonId={userSelectId}
+              buttonContent={
+                <UserAnnotationsListItem userAnnotations={selectedUser} />
+              }
+              data-testid="user-select"
+            >
+              <SelectNext.Option value={allAnnotationsOption}>
+                <UserAnnotationsListItem
+                  userAnnotations={allAnnotationsOption}
+                />
+              </SelectNext.Option>
+              {userList.map(userInfo => (
+                <SelectNext.Option key={userInfo.userid} value={userInfo}>
+                  <UserAnnotationsListItem userAnnotations={userInfo} />
+                </SelectNext.Option>
+              ))}
+            </SelectNext>
             <label
               data-testid="export-count"
               htmlFor={fileInputId}
@@ -246,7 +270,9 @@ function ExportAnnotations({
                   <SelectNext
                     value={exportFormat}
                     onChange={setExportFormat}
-                  buttonContent={exportFormat.shortTitle ?? exportFormat.title}
+                    buttonContent={
+                      exportFormat.shortTitle ?? exportFormat.title
+                    }
                     data-testid="export-format-select"
                     right
                   >
@@ -269,27 +295,7 @@ function ExportAnnotations({
                 </div>
               )}
             </div>
-          <label htmlFor={userSelectId} className="block font-medium">
-            Select which user{"'"}s annotations to export:
-          </label>
-          <SelectNext
-            value={selectedUser}
-            onChange={setSelectedUser}
-            buttonId={userSelectId}
-            buttonContent={
-              <UserAnnotationsListItem userAnnotations={selectedUser} />
-            }
-            data-testid="user-select"
-          >
-            <SelectNext.Option value={allAnnotationsOption}>
-              <UserAnnotationsListItem userAnnotations={allAnnotationsOption} />
-            </SelectNext.Option>
-            {userList.map(userInfo => (
-              <SelectNext.Option key={userInfo.userid} value={userInfo}>
-                <UserAnnotationsListItem userAnnotations={userInfo} />
-              </SelectNext.Option>
-            ))}
-          </SelectNext>
+          </div>
         </>
       ) : (
         <p data-testid="no-annotations-message">