Fix settings view scrolling by adding overflow-hidden to container

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

@@ -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"
   }
 ]

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">

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
+  );
+}