Skip to content

Commit 3a73481

Browse files
remarkablemarkremarkablemark
committed
docs(specs): update spec
1 parent 6c63886 commit 3a73481

1 file changed

Lines changed: 46 additions & 4 deletions

File tree

  • specs/001-fix-line-number-scrolling

‎specs/001-fix-line-number-scrolling/spec.md‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
**Feature Branch**: `001-fix-line-number-scrolling`
44
**Created**: 2026-02-26
5-
**Status**: Completed (User Story 1) / Draft (User Story 2)
5+
**Status**: Completed (User Story 1 & 3) / Draft (User Story 2)
66
**Input**: User description: "fix line number scrolling"
77

88
## User Scenarios & Testing _(mandatory)_
@@ -49,10 +49,37 @@ As a user viewing diffs on different screen sizes, I want the line numbers to di
4949

5050
---
5151

52+
### User Story 3 - Horizontal Scrollbar Detection (Priority: P1) ✅ **COMPLETED**
53+
54+
As a user viewing diffs with long lines that cause horizontal scrollbars, I want the line numbers to have extra bottom padding when horizontal scrollbars appear, so the last line number remains visible and not obscured by the scrollbar.
55+
56+
**Why this priority**: This addresses a visual usability issue where horizontal scrollbars can cover the last line number, making it difficult to reference the final line in the diff.
57+
58+
**Independent Test**: Can be fully tested by creating content that triggers horizontal scrolling and verifying the last line number has appropriate padding.
59+
60+
**Acceptance Scenarios**:
61+
62+
1. **Given** a diff with long lines that trigger horizontal scrolling, **When** the scrollbar appears, **Then** the line number gutter adds 2rem bottom padding plus scrollbar height
63+
2. **Given** a diff with short lines that don't trigger horizontal scrolling, **When** rendered, **Then** the line number gutter uses normal padding without extra space
64+
3. **Given** content changes that add/remove horizontal scrolling, **When** the scrollbar state changes, **Then** the padding updates dynamically
65+
66+
**Implementation Notes**:
67+
68+
- Added horizontal scrollbar detection using `scrollWidth > clientWidth` comparison
69+
- Implemented dynamic padding with `pb-[calc(2rem+var(--scrollbar-size,0px))]` CSS class
70+
- Added `useState` to track scrollbar presence in both `TextInput` and `LineNumberGutter` components
71+
- Used `useEffect` with `setTimeout` to avoid React setState warnings
72+
- Enhanced both components to detect scrollbars and apply padding automatically
73+
- Maintained 100% test coverage with comprehensive test cases
74+
- Used CSS custom properties for scrollbar size customization
75+
76+
---
77+
5278
### Edge Cases
5379

5480
- ✅ **SOLVED**: What happens when line numbers have different digit counts (e.g., line 9 vs line 1000)? → Dynamic width calculation (2-3 digits)
5581
- ✅ **SOLVED**: How does system handle very long lines that exceed viewport width? → Horizontal scrolling with `whitespace-pre` prevents wrapping
82+
- ✅ **SOLVED**: What happens when horizontal scrollbars appear and cover the last line number? → Dynamic bottom padding detection with 2rem + scrollbar height
5683
- What happens when the diff content is shorter than the viewport height? → Line numbers still render correctly
5784
- What happens when the diff content is shorter than the viewport height? → Current behavior preserved
5885
- ✅ **SOLVED**: What happens when text is pasted creating very long lines? → Horizontal scrolling maintains alignment
@@ -80,14 +107,19 @@ As a user viewing diffs on different screen sizes, I want the line numbers to di
80107
- **FR-005**: System MUST ensure line numbers remain readable and accessible
81108
- **FR-006**: System MUST maintain proper spacing between line numbers and content
82109
- **FR-007**: System MUST preserve native textarea functionality (selection, copy, accessibility) while achieving synchronization
110+
- **FR-008**: System MUST detect horizontal scrollbars and add appropriate bottom padding to line number gutters
111+
- **FR-009**: System MUST dynamically adjust padding when horizontal scrollbar state changes
112+
- **FR-010**: System MUST use 2rem bottom padding plus scrollbar height when horizontal scrollbar is detected
83113

84114
### Key Entities _(include if feature involves data)_
85115

86-
- **Line Number Gutter**: The auto-sizing column displaying line numbers in a separate scroll container, using monospace font with right-alignment, minimum 2-digit width growing to maximum 3-digit width
116+
- **Line Number Gutter**: The auto-sizing column displaying line numbers in a separate scroll container, using monospace font with right-alignment, minimum 2-digit width growing to maximum 3-digit width, with dynamic bottom padding for horizontal scrollbars
87117
- **Diff Content Area**: The textarea containing diff text with synchronized scrolling
88118
- **Scroll Container**: Linked containers managing coordinated scroll behavior between gutter and content
89119
- **Viewport**: The visible area of the diff viewer
90120
- **Scroll Event Coordinator**: JavaScript mechanism synchronizing scroll positions between containers
121+
- **Horizontal Scrollbar Detector**: JavaScript logic that compares `scrollWidth` vs `clientWidth` to detect scrollbar presence
122+
- **Dynamic Padding Calculator**: CSS-based system using `calc(2rem+var(--scrollbar-size,0px))` for appropriate spacing
91123

92124
## Success Criteria _(mandatory)_
93125

@@ -101,6 +133,14 @@ As a user viewing diffs on different screen sizes, I want the line numbers to di
101133
- **SC-004**: Line number display works correctly across viewport widths from 320px to 1920px ✅
102134
- **SC-005**: No horizontal scrollbar appears for line number gutter under any circumstances ✅
103135

136+
**User Story 3 - Horizontal Scrollbar Detection** ✅ **COMPLETED**
137+
138+
- **SC-010**: Horizontal scrollbars are detected automatically using scrollWidth vs clientWidth comparison ✅
139+
- **SC-011**: Line number gutter adds 2rem bottom padding when horizontal scrollbar is present ✅
140+
- **SC-012**: Padding updates dynamically when scrollbar state changes ✅
141+
- **SC-013**: Last line number remains visible and not obscured by horizontal scrollbar ✅
142+
- **SC-014**: Normal padding is maintained when no horizontal scrollbar is present ✅
143+
104144
**User Story 2 - Responsive Line Number Display** 🔄 **IN PROGRESS**
105145

106146
- **SC-006**: Line numbers adapt to different viewport sizes without breaking layout
@@ -113,8 +153,10 @@ As a user viewing diffs on different screen sizes, I want the line numbers to di
113153
- ✅ **Transform-based scrolling**: Smooth CSS transform synchronization
114154
- ✅ **Dynamic width calculation**: Auto-sizing from 2-3 digits based on line count
115155
- ✅ **Horizontal scrolling support**: `whitespace-pre` prevents wrapping issues
116-
- ✅ **100% test coverage**: 40/40 tests passing across all components
156+
- ✅ **Horizontal scrollbar detection**: Automatic detection using DOM comparison
157+
- ✅ **Dynamic bottom padding**: 2rem + scrollbar height when needed
158+
- ✅ **100% test coverage**: 145/145 tests passing across all components
117159
- ✅ **TypeScript strict mode**: Full type safety with proper interfaces
118160
- ✅ **Tailwind CSS only**: No custom CSS, consistent styling approach
119161
- ✅ **Accessibility compliance**: ARIA labels and semantic HTML
120-
- ✅ **Performance optimized**: Efficient scroll event handling
162+
- ✅ **Performance optimized**: Efficient scroll event handling with setTimeout

0 commit comments

Comments
 (0)