From 000cae6737c57c8c1b1e6b74c19f1bfa051f5a3b Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Tue, 9 Dec 2025 19:36:18 +0100
Subject: [PATCH] Fix settings view scrolling by adding overflow-hidden to
 container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The settings view was not allowing scrolling because the outer container
lacked overflow-hidden. This prevented the inner overflow-y-auto content
area from properly constraining its height and enabling scroll behavior.

Added overflow-hidden to the settings view container to match the pattern
used in other views like board-view.tsx.

Also added utility functions for settings navigation and scroll testing.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .automaker/feature_list.json               | 11 +++
 app/src/components/views/settings-view.tsx |  2 +-
 app/tests/utils.ts                         | 81 ++++++++++++++++++++++
 3 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/.automaker/feature_list.json b/.automaker/feature_list.json
index d3ef63ef..95f7cb04 100644
--- a/.automaker/feature_list.json
+++ b/.automaker/feature_list.json
@@ -33,5 +33,16 @@
     "description": "-o should actually open the select folder prompt. Right now when you click o it goes to like the overview page. That's not the correct experience I'm looking for. Also just clicking on the top left open folder icon should do the same thing of opening the system prompt so they can select a project.",
     "steps": [],
     "status": "verified"
+  },
+  {
+    "id": "feature-1765305181443-qze22t1hl",
+    "category": "Other",
+    "description": "the settings view is not allowing us to scroll to see rest of the content ",
+    "steps": [
+      "start the project",
+      "open Setting view",
+      "try to scroll "
+    ],
+    "status": "verified"
   }
 ]
\ No newline at end of file
diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index 957e2005..295cbd42 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -89,7 +89,7 @@ export function SettingsView() {
   };
 
   return (
-    <div className="flex-1 flex flex-col content-bg" data-testid="settings-view">
+    <div className="flex-1 flex flex-col overflow-hidden content-bg" data-testid="settings-view">
       {/* Header Section */}
       <div className="flex-shrink-0 border-b border-white/10 bg-zinc-950/50 backdrop-blur-md">
         <div className="px-8 py-6">
diff --git a/app/tests/utils.ts b/app/tests/utils.ts
index db0e9c08..09381da5 100644
--- a/app/tests/utils.ts
+++ b/app/tests/utils.ts
@@ -1860,3 +1860,84 @@ export async function isDropOverlayVisible(page: Page): Promise<boolean> {
   const overlay = page.locator('[data-testid="drop-overlay"]');
   return await overlay.isVisible().catch(() => false);
 }
+
+/**
+ * Navigate to the settings view
+ */
+export async function navigateToSettings(page: Page): Promise<void> {
+  await page.goto("/");
+
+  // Wait for the page to load
+  await page.waitForLoadState("networkidle");
+
+  // Click on the Settings button in the sidebar
+  const settingsButton = page.locator('[data-testid="settings-button"]');
+  if (await settingsButton.isVisible().catch(() => false)) {
+    await settingsButton.click();
+  }
+
+  // Wait for the settings view to be visible
+  await waitForElement(page, "settings-view", { timeout: 10000 });
+}
+
+/**
+ * Get the settings view scrollable content area
+ */
+export async function getSettingsContentArea(page: Page): Promise<Locator> {
+  return page.locator('[data-testid="settings-view"] .overflow-y-auto');
+}
+
+/**
+ * Check if an element is scrollable (has scrollable content)
+ */
+export async function isElementScrollable(locator: Locator): Promise<boolean> {
+  const scrollInfo = await locator.evaluate((el) => {
+    return {
+      scrollHeight: el.scrollHeight,
+      clientHeight: el.clientHeight,
+      isScrollable: el.scrollHeight > el.clientHeight,
+    };
+  });
+  return scrollInfo.isScrollable;
+}
+
+/**
+ * Scroll an element to the bottom
+ */
+export async function scrollToBottom(locator: Locator): Promise<void> {
+  await locator.evaluate((el) => {
+    el.scrollTop = el.scrollHeight;
+  });
+}
+
+/**
+ * Get the scroll position of an element
+ */
+export async function getScrollPosition(locator: Locator): Promise<{ scrollTop: number; scrollHeight: number; clientHeight: number }> {
+  return await locator.evaluate((el) => ({
+    scrollTop: el.scrollTop,
+    scrollHeight: el.scrollHeight,
+    clientHeight: el.clientHeight,
+  }));
+}
+
+/**
+ * Check if an element is visible within a scrollable container
+ */
+export async function isElementVisibleInScrollContainer(
+  element: Locator,
+  container: Locator
+): Promise<boolean> {
+  const elementBox = await element.boundingBox();
+  const containerBox = await container.boundingBox();
+
+  if (!elementBox || !containerBox) {
+    return false;
+  }
+
+  // Check if element is within the visible area of the container
+  return (
+    elementBox.y >= containerBox.y &&
+    elementBox.y + elementBox.height <= containerBox.y + containerBox.height
+  );
+}