fix(terminal): tables keep their columns, blank lines show, the tutor button no longer hides keys - #397
Merged
Conversation
… button no longer hides keys Found in the visual check of #396 on mobile, tablet and desktop: - Lines laid out in columns (Get-Process, ps, ls -l, Get-History) are grouped by segmentOutput and shown unwrapped in TerminalColumns, which scrolls sideways with a right-edge fade and becomes a labelled focusable region only when it overflows. A lone line of names (ls, Tab completion) and git status entries keep wrapping. - Blank output lines keep their height (an empty div collapsed to nothing). - The touch key bar reserves its end for the AI tutor button, which covered the last keys (reserveKeyBarEnd, isAiTutorEnabled). - The terminal input stays 16px on touch screens (iPad Safari focus zoom). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @thierryvm, you've used your own review budget of 250,000 diff characters for the last 7 days.
You can request another review in 7 hours and 39 minutes by commenting @sourcery-ai review. Upgrade to get a review now.
Guide du réviseurLa PR met à jour la mise en page de la sortie du terminal afin de préserver les tableaux de commandes sur plusieurs lignes dans des blocs défilables horizontalement, de restaurer la hauteur des lignes vides et d’ajouter des indicateurs d’accessibilité en cas de dépassement, tout en réservant de l’espace dans la barre de raccourcis pour le FAB du tuteur IA et en maintenant une taille de saisie tactile de 16 px pour empêcher le zoom sur iPad ; les tests couvrent la segmentation, le comportement du rendu et la réservation de la barre de touches. Diagramme d’état des tableaux de terminal défilables horizontalementstateDiagram-v2
[*] --> Fits
Fits --> Overflowing: content width exceeds container
Overflowing --> Scrolled: user scrolls horizontally
Scrolled --> Overflowing: not at end
Scrolled --> AtEnd: reaches end
Overflowing --> Fits: container or content resize
AtEnd --> Overflowing: content changes or scrolls back
Diagramme de flux de la segmentation de la sortie du terminalflowchart LR
Lines[Terminal output lines] --> Segment[segmentOutput]
Segment -->|Two or more column rows| Columns[TerminalColumns]
Columns --> Scroll[Horizontal scroll]
Columns --> Cue[Right-edge fade and conditional region tab stop]
Segment -->|Prose, lone lists, prompts, git status| Wrapped[Wrapped terminal lines]
Segment -->|Blank lines| Spaced[Visible min-h-5 lines]
Modifications au niveau des fichiers
Conseils et commandesInteragir avec Sourcery
Personnaliser votre expérienceAccédez à votre tableau de bord pour :
Obtenir de l’aide
Original review guide in EnglishReviewer's GuideThe PR updates terminal output layout to preserve multi-row command tables in horizontally scrollable blocks, restore blank-line height, and add overflow accessibility cues, while reserving shortcut-bar space for the AI tutor FAB and maintaining a 16px touch input size to prevent iPad zoom; tests cover segmentation, rendering behavior, and key-bar reservation. State diagram for horizontally scrollable terminal tablesstateDiagram-v2
[*] --> Fits
Fits --> Overflowing: content width exceeds container
Overflowing --> Scrolled: user scrolls horizontally
Scrolled --> Overflowing: not at end
Scrolled --> AtEnd: reaches end
Overflowing --> Fits: container or content resize
AtEnd --> Overflowing: content changes or scrolls back
Flow diagram for terminal output segmentationflowchart LR
Lines[Terminal output lines] --> Segment[segmentOutput]
Segment -->|Two or more column rows| Columns[TerminalColumns]
Columns --> Scroll[Horizontal scroll]
Columns --> Cue[Right-edge fade and conditional region tab stop]
Segment -->|Prose, lone lists, prompts, git status| Wrapped[Wrapped terminal lines]
Segment -->|Blank lines| Spaced[Visible min-h-5 lines]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
2 of 4 tasks
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR fixes three display defects in the lesson terminal. They showed up in the visual check of #396: mobile 390px, tablet 1024px (touch) and desktop 1280px, in a local Chrome session. None of them was new in #396, and all of them affected every learner.
Get-Process,ps,ls -l,Get-ScheduledTaskandGet-Historywere wrapped to the terminal width (whitespace-pre-wrap). On a phone every row broke into pieces, and on desktop the last column wrapped.segmentOutput(terminalLayout.ts) groups consecutive column lines. A column line has 2 or more spaces between words, or is a dash rule. The group is rendered unwrapped inTerminalColumns, which scrolls sideways.ls, Tab completion) andgit statusentries (tab-indented). This is how a real terminal reflows them.region, named after its header row, only when it overflows.divhad no height, soGet-Helpsections and PowerShell tables lost their spacing. Each line now hasmin-h-5.pe-16at its end, viareserveKeyBarEnd={isAiTutorEnabled()}. The FAB now sits at the end of the bar like one more key.md:pointer-fine:text-sm). Safari zooms on focus below 16px.Reviews
ui-auditor: 0 CRITICAL. W1 is fixed: the focus ring now uses theringtoken at 2px instead of emerald at 1px. W4 is fixed:regionand the tab stop are added only when the table overflows.mobile-responsive-auditor: PASS_WITH_NOTES, 0 CRITICAL. Fixed: the scroll cue (fade),overscroll-x-contain, and the iPad zoom.feature-dev:code-reviewer: 1 IMPORTANT and 4 MINOR findings, all fixed with tests.lsand Tab lists were treated as tables. A table now needs 2 or more rows.git statustab lines are excluded; the segment key is stable (last row id); the content box is observed; each region gets a specific label.accessibility.spec.ts(chromium): the landing-page tests time out onmaintoo (6 failures onmain, 5 on this branch). The failure is pre-existing and not related to this PR; it will be tracked separately.Test plan
tsc --noEmit,eslint src,vitest run(2791 passed),vite buildterminalLayout.test.tsx: segmentation,lssingle line,git statuslines, the realGet-Historytable,TerminalColumnstab stop and region, key bar reservelsandls -la, PowerShellGet-Process,Get-HistoryandGet-Helpchecked🤖 Generated with Claude Code
Résumé par Sourcery
Amélioration de la lisibilité du terminal et de la mise en page sur les écrans tactiles pour les appareils mobiles, les tablettes et les ordinateurs de bureau.
Corrections de bugs :
Améliorations :
Documentation :
Tests :
Original summary in English
Summary by Sourcery
Improve terminal readability and touch-screen layout across mobile, tablet, and desktop displays.
Bug Fixes:
Enhancements:
Documentation:
Tests: