feat: Story 9 - Remove scroll bars for cleaner UI

Implemented Story 9: Hidden Scroll Bars
- Added CSS to hide scroll bars globally while maintaining functionality
- Used scrollbar-width: none for Firefox
- Used ::-webkit-scrollbar { display: none; } for Chrome/Safari/Edge
- Set overflow-x: hidden to prevent unwanted horizontal scrolling
- Maintained full scroll functionality (mouse wheel, trackpad, keyboard)

Updated Specs
- Added Scroll Bar Styling section to UI_UX.md
- Documented cross-browser compatibility requirements
- Specified areas affected and implementation approach

Bug Fixes
- Fixed biome linting issues in App.tsx (import organization, button type)
- Applied biome formatter for consistent code style

.living_spec/specs/functional/UI_UX.md

@@ -53,3 +53,32 @@ Tool outputs should be rendered in a collapsible component that is **closed by d
 *   Or implement custom collapsible component with proper ARIA attributes
 *   Tool outputs should be visually distinct (border, background color, or badge)
 *   Multiple tool calls in sequence should each be independently collapsible
+
+## Scroll Bar Styling
+
+### Problem
+Visible scroll bars create visual clutter and make the interface feel less polished. Standard browser scroll bars can be distracting and break the clean aesthetic of the dark theme.
+
+### Solution: Hidden Scroll Bars with Maintained Functionality
+Scroll bars should be hidden while maintaining full scroll functionality.
+
+### Requirements
+
+1. **Visual:** Scroll bars should not be visible to the user
+2. **Functionality:** Scrolling must still work perfectly:
+   - Mouse wheel scrolling
+   - Trackpad scrolling
+   - Keyboard navigation (arrow keys, page up/down)
+   - Auto-scroll to bottom for new messages
+3. **Cross-browser:** Solution must work on Chrome, Firefox, and Safari
+4. **Areas affected:**
+   - Main chat message area (vertical scroll)
+   - Tool output content (both vertical and horizontal)
+   - Any other scrollable containers
+
+### Implementation Notes
+*   Use CSS `scrollbar-width: none` for Firefox
+*   Use `::-webkit-scrollbar { display: none; }` for Chrome/Safari/Edge
+*   Maintain `overflow: auto` or `overflow-y: scroll` to preserve scroll functionality
+*   Ensure `overflow-x: hidden` where horizontal scroll is not needed
+*   Test with very long messages and large tool outputs to ensure no layout breaking

.living_spec/stories/09_remove_scroll_bars.md

@@ -1,3 +0,0 @@
-there is a scroll bar on the right that looks gross. also a horizontal scroll bar that should come out
-
-story needs to be worked through

.living_spec/stories/archive/09_remove_scroll_bars.md

@@ -0,0 +1,27 @@
+# Story: Remove Unnecessary Scroll Bars
+
+## User Story
+**As a** User
+**I want** the UI to have clean, minimal scrolling without visible scroll bars
+**So that** the interface looks polished and doesn't have distracting visual clutter.
+
+## Acceptance Criteria
+*   [x] Remove or hide the vertical scroll bar on the right side of the chat area
+*   [x] Remove or hide any horizontal scroll bars that appear
+*   [x] Maintain scrolling functionality (content should still be scrollable, just without visible bars)
+*   [x] Consider using overlay scroll bars or auto-hiding scroll bars for better aesthetics
+*   [x] Ensure the solution works across different browsers (Chrome, Firefox, Safari)
+*   [x] Verify that long messages and tool outputs still scroll properly
+
+## Out of Scope
+*   Custom scroll bar designs with fancy styling
+*   Touch/gesture scrolling improvements for mobile (desktop focus for now)
+
+## Implementation Notes
+*   Use CSS `scrollbar-width: none` for Firefox
+*   Use `::-webkit-scrollbar { display: none; }` for Chrome/Safari
+*   Ensure `overflow: auto` or `overflow-y: scroll` is still applied to maintain scroll functionality
+*   Test with long tool outputs and chat histories to ensure no layout breaking
+
+## Related Functional Specs
+*   Functional Spec: UI/UX

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "test": "jest"
   },
   "dependencies": {
     "@tauri-apps/api": "^2",
@@ -24,6 +25,11 @@
     "@types/react-dom": "^19.1.6",
     "@vitejs/plugin-react": "^4.6.0",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4"
+    "vite": "^7.0.4",
+    "jest": "^29.0.0",
+    "ts-jest": "^29.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/user-event": "^14.4.3"
   }
 }

src/App.css

@@ -158,3 +158,20 @@ details summary span:first-child {
     background: transparent;
     padding: 0;
 }
+
+/* Hide scroll bars globally while maintaining scroll functionality */
+/* Firefox */
+* {
+    scrollbar-width: none;
+}
+
+/* Chrome, Safari, Edge */
+*::-webkit-scrollbar {
+    display: none;
+}
+
+/* Ensure scroll functionality is maintained */
+body,
+html {
+    overflow-x: hidden;
+}

src/App.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import App from "./App";
+
+// Since the App component relies on Tauri APIs, we mock them to isolate tests
+jest.mock("@tauri-apps/api/core", () => ({
+  invoke: jest.fn().mockResolvedValue(null),
+}));
+
+jest.mock("@tauri-apps/plugin-dialog", () => ({
+  open: jest.fn().mockResolvedValue("/tmp/project"),
+}));
+
+test("renders without crashing", () => {
+  render(<App />);
+  expect(screen.getByText("AI Code Assistant")).toBeInTheDocument();
+});
+
+it("opens project directory button calls open", async () => {
+  const { open } = require("@tauri-apps/plugin-dialog");
+  render(<App />);
+  const button = screen.getByText("Open Project Directory");
+  fireEvent.click(button);
+  await Promise.resolve(); // wait for async open
+  expect(open).toHaveBeenCalled();
+});

src/App.tsx

@@ -1,88 +1,90 @@
-import { useState, useEffect } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { open } from "@tauri-apps/plugin-dialog";
+import { useEffect, useState } from "react";
 import { Chat } from "./components/Chat";
 import "./App.css";
 
 function App() {
-  const [projectPath, setProjectPath] = useState<string | null>(null);
+	const [projectPath, setProjectPath] = useState<string | null>(null);
-  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+	const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
-  useEffect(() => {
+	useEffect(() => {
-    invoke<string | null>("get_current_project")
+		invoke<string | null>("get_current_project")
-      .then((path) => {
+			.then((path) => {
-        if (path) setProjectPath(path);
+				if (path) setProjectPath(path);
-      })
+			})
-      .catch((e) => console.error(e));
+			.catch((e) => console.error(e));
-  }, []);
+	}, []);
 
-  async function closeProject() {
+	async function closeProject() {
-    try {
+		try {
-      await invoke("close_project");
+			await invoke("close_project");
-      setProjectPath(null);
+			setProjectPath(null);
-    } catch (e) {
+		} catch (e) {
-      console.error(e);
+			console.error(e);
-    }
+		}
-  }
+	}
 
-  async function selectProject() {
+	async function selectProject() {
-    try {
+		try {
-      setErrorMsg(null);
+			setErrorMsg(null);
-      // Open native folder picker
+			// Open native folder picker
-      const selected = await open({
+			const selected = await open({
-        directory: true,
+				directory: true,
-        multiple: false,
+				multiple: false,
-      });
+			});
 
-      if (selected === null) {
+			if (selected === null) {
-        // User cancelled selection
+				// User cancelled selection
-        return;
+				return;
-      }
+			}
 
-      // Invoke backend command to verify and set state
+			// Invoke backend command to verify and set state
-      // Note: invoke argument names must match Rust function args
+			// Note: invoke argument names must match Rust function args
-      const confirmedPath = await invoke<string>("open_project", {
+			const confirmedPath = await invoke<string>("open_project", {
-        path: selected,
+				path: selected,
-      });
+			});
-      setProjectPath(confirmedPath);
+			setProjectPath(confirmedPath);
-    } catch (e) {
+		} catch (e) {
-      console.error(e);
+			console.error(e);
-      setErrorMsg(
+			setErrorMsg(
-        typeof e === "string" ? e : "An error occurred opening the project.",
+				typeof e === "string" ? e : "An error occurred opening the project.",
-      );
+			);
-    }
+		}
-  }
+	}
 
-  return (
+	return (
-    <main
+		<main
-      className="container"
+			className="container"
-      style={{ height: "100vh", padding: 0, maxWidth: "100%" }}
+			style={{ height: "100vh", padding: 0, maxWidth: "100%" }}
-    >
+		>
-      {!projectPath ? (
+			{!projectPath ? (
-        <div
+				<div
-          className="selection-screen"
+					className="selection-screen"
-          style={{ padding: "2rem", maxWidth: "800px", margin: "0 auto" }}
+					style={{ padding: "2rem", maxWidth: "800px", margin: "0 auto" }}
-        >
+				>
-          <h1>AI Code Assistant</h1>
+					<h1>AI Code Assistant</h1>
-          <p>
+					<p>
-            Please select a project folder to start the Story-Driven Spec
+						Please select a project folder to start the Story-Driven Spec
-            Workflow.
+						Workflow.
-          </p>
+					</p>
-          <button onClick={selectProject}>Open Project Directory</button>
+					<button type="button" onClick={selectProject}>
-        </div>
+						Open Project Directory
-      ) : (
+					</button>
-        <div className="workspace" style={{ height: "100%" }}>
+				</div>
-          <Chat projectPath={projectPath} onCloseProject={closeProject} />
+			) : (
-        </div>
+				<div className="workspace" style={{ height: "100%" }}>
-      )}
+					<Chat projectPath={projectPath} onCloseProject={closeProject} />
+				</div>
+			)}
 
-      {errorMsg && (
+			{errorMsg && (
-        <div className="error-message" style={{ marginTop: "20px" }}>
+				<div className="error-message" style={{ marginTop: "20px" }}>
-          <p style={{ color: "red" }}>Error: {errorMsg}</p>
+					<p style={{ color: "red" }}>Error: {errorMsg}</p>
-        </div>
+				</div>
-      )}
+			)}
-    </main>
+		</main>
-  );
+	);
 }
 
 export default App;