Fix issue #8135: [Bug]: UI of repo selector misaligns on small screens

frontend/src/components/features/home/repo-selection-form.test.tsx

@@ -135,4 +135,33 @@ describe("RepositorySelectionForm", () => {
       screen.getByText("HOME$FAILED_TO_LOAD_REPOSITORIES"),
     ).toBeInTheDocument();
   });
+
+  test("has responsive width on mobile screens", () => {
+    // Setup loaded repositories
+    mockUseUserRepositories.mockReturnValue({
+      data: {
+        pages: [
+          {
+            data: [
+              {
+                id: 1,
+                full_name: "user/repo1",
+                git_provider: "github",
+                is_public: true,
+              },
+            ],
+          },
+        ],
+      },
+      isLoading: false,
+      isError: false,
+    });
+
+    render(<RepositorySelectionForm onRepoSelection={mockOnRepoSelection} />);
+
+    // Check if dropdown has responsive width classes
+    const dropdown = screen.getByTestId("repo-dropdown");
+    const wrapper = dropdown.closest("label");
+    expect(wrapper).toHaveClass("w-full", "max-w-[500px]");
+  });
 });

frontend/src/components/features/home/repo-selection-form.tsx

@@ -18,7 +18,7 @@ function RepositoryLoadingState() {
   return (
     <div
       data-testid="repo-dropdown-loading"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
+      className="flex items-center gap-2 w-full max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded"
     >
       <Spinner size="sm" />
       <span className="text-sm">{t("HOME$LOADING_REPOSITORIES")}</span>
@@ -32,7 +32,7 @@ function RepositoryErrorState() {
   return (
     <div
       data-testid="repo-dropdown-error"
-      className="flex items-center gap-2 max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
+      className="flex items-center gap-2 w-full max-w-[500px] h-10 px-3 bg-tertiary border border-[#717888] rounded text-red-500"
     >
       <span className="text-sm">{t("HOME$FAILED_TO_LOAD_REPOSITORIES")}</span>
     </div>
@@ -57,7 +57,7 @@ function RepositoryDropdown({
       name="repo-dropdown"
       placeholder="Select a repo"
       items={items}
-      wrapperClassName="max-w-[500px]"
+      wrapperClassName="w-full max-w-[500px]"
       onSelectionChange={onSelectionChange}
       onInputChange={onInputChange}
     />

frontend/src/components/features/settings/settings-dropdown-input.tsx

@@ -53,12 +53,13 @@ export function SettingsDropdownInput({
         placeholder={placeholder}
         className="w-full"
         classNames={{
-          popoverContent: "bg-tertiary rounded-xl border border-[#717888]",
+          popoverContent:
+            "bg-tertiary rounded-xl border border-[#717888] max-w-[calc(100vw-2rem)] sm:max-w-none",
         }}
         inputProps={{
           classNames: {
             inputWrapper:
-              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic",
+              "bg-tertiary border border-[#717888] h-10 w-full rounded p-2 placeholder:italic text-sm sm:text-base",
           },
         }}
       >