#3535 fix(webapp): גלילה וחיפוש בתצוגת קובץ — סרגל החיפוש נשאר על המסך, ▼ במתקדם מגיע לתוצאה, ומסך מלא נגלל עד הסוף

✨ תיאור קצר

ארבע תקלות גלילה וחיפוש בתצוגת קובץ, שנמצאו בטאבלט (כרום לאנדרואיד, מגע), מתוקנות:

• מסך רגיל: סרגל החיפוש נשאר צמוד לראש המסך כשקופצים לתוצאה, ואפשר להמשיך ללחוץ ▼. אותו דבר בסרגל של תצוגת ה-Markdown, ושם כותרת שגוללים אליה נוחתת מתחת לסרגל ולא מאחוריו.
• תצוגה מתקדמת: ▼ גולל להתאמה הבאה ומביא אותה למרכז המסך.
• מסך מלא: בתצוגה המתקדמת אפשר לגלול (קודם שום דבר לא זז), ובבסיסית השורה האחרונה נגישה (קודם היא נחתכה).

לתקלות יש שלושה שורשים שונים, ולכן יש כאן שלושה תיקונים ולא אחד. לכל תקלה יש בדיקת דפדפן, שנכשלה על הקוד הקודם.

📦 שינויים עיקריים

• קוד (Backend) — לא; פרונטאנד בלבד (תבניות, CSS, JS) ובדיקות
• בוט טלגרם
• מסד נתונים/מיגרציות
• תיעוד (docs/)
• DevOps/CI/CD

פירוט:

• הסרגל הצמוד — base.html. ב-.main-content, .container הוחלף overflow-x: hidden ב-overflow-x: clip, ו-hidden נשאר לפניו כנפילה-לאחור. לפי CSS Overflow 3, hidden בציר אחד הופך את הציר השני ל-auto. לכן שני המיכלים היו "קופסת גלילה" שאף פעם לא גוללת, ו-position: sticky נצמד אליהם במקום להיצמד לראש המסך. clip חותך לרוחב בדיוק אותו דבר, בלי לייצר קופסת גלילה. אותה החלטה כבר קיימת ב-global_search.css (#3351). השינוי חל על כל האתר, ולכן כל האלמנטים הצמודים נבדקו (ראו "בדיקת כל האלמנטים הצמודים" למטה).
• ▼ בתצוגה המתקדמת — view-codemirror-toggle.js. EditorView.scrollHandler מעביר את הגלילה של CodeMirror ל-scrollIntoView של הדפדפן. CodeMirror (scrollRectIntoView ב-@codemirror/view 6.38.6) מניח שכשהוא מגיע ל-body זה החלון, ולכן קורא ל-window.scrollBy. אצלנו העמוד נגלל בתוך body (#3534), ולכן שום דבר לא זז. החיפוש מבקש עכשיו למרכז את ההתאמה (y: 'center'), כמו בתצוגה הבסיסית, כדי שהיא לא תנחת מתחת לסרגל הצמוד.
• מסך מלא — view_file.html ו-codemirror-custom.css. במסך מלא הכרטיס הוא עמודה גמישה, וקופסת הקוד ממלאת בדיוק את המקום שנשאר וגוללת בשתי התצוגות. הוסר calc(100vh - 120px), שהניח שהכותרת והסרגל תופסים 120 פיקסלים (בפועל כ-182). הוסרו גם שני כללי height: 100% שמעולם לא פעלו. הכלל #codeCard.is-advanced .code-container { overflow: visible } חל עכשיו רק מחוץ למסך מלא. קודם הוא גבר על ה-overflow: auto של המסך המלא, כי הספציפיות שלהם שווה והוא כתוב אחריו.
• כותרות ב-Markdown — md_preview.html. לכל הכותרות ולעוגנים המפורשים נוסף scroll-margin-top, לפי גובה הסרגל כפי שנמדד (--md-toolbar-h, שמתעדכן ב-ResizeObserver). בטלפון הסרגל גבוה בהרבה מ-80 פיקסלים, ומרווח קבוע היה משאיר שם את הכותרת מתחתיו.
• בונה הערכות — settings/theme_builder.html. בפריסה של שלוש עמודות הסרגל הצדי נצמד, כמו שתוכנן. בפריסות הצרות (@media (max-width: 1200px)) ההצמדה מבוטלת: נמדד שבהן הפריטים הצמודים החליקו מעל התצוגה המקדימה והבקרים, וכיסו אותם.
• בדיקות: הקובץ החדש tests/test_view_file_scroll_browser.py. כלי המגע והדגימה (Touch, poll) הועברו מ-tests/test_repo_notes_browser.py ל-tests/_browser_harness.py, כדי ששני קובצי הבדיקות ישתמשו באותו עותק.
• תיעוד: ב-docs/webapp/theming_and_css.rst נוסף כלל: "למניעת גלילה לרוחב משתמשים ב-clip, לא ב-hidden", יחד עם שני דברים שצריך לזכור כשאלמנט באמת נצמד. ב-docs/whats-new.rst נוספה שורה.

🧪 בדיקות

לכל תקלה יש בדיקת דפדפן, בכרומיום אמיתי ובעמוד האמיתי (/file/<id> ו-/md/<id> מול מונגו אמיתי), במגע דרך CDP ובגודל טאבלט. כל בדיקה רצה קודם על הקוד שלפני התיקון (ב-worktree נפרד על f926bc08) ונכשלה. אחר כך היא רצה על התיקון ועברה, פעמיים ברצף:

בדיקה	לפני התיקון: נכשלה, וזה מה שנמדד	אחרי
בסיסי, מסך רגיל: הסרגל צמוד אחרי קפיצה לתוצאה, ו-▼ נגיש	הסרגל 749 פיקסלים מעל ראש המסך	✓
מתקדם, מסך רגיל: ▼ מביא את ההתאמה הבאה למסך	ההתאמה ב-1760, במסך בגובה 800	✓
מתקדם, מסך מלא: החלקה מזיזה את הקוד	הקוד נשאר ב-182	✓
בסיסי, מסך מלא: השורה האחרונה בתוך המסך	תחתית השורה ב-834, במסך בגובה 800	✓
Markdown, טאבלט: הסרגל צמוד והכותרת מתחתיו	הסרגל 4079 פיקסלים מעל ראש המסך, הכותרת ב-0	✓
Markdown, טלפון: אותו דבר	הסרגל 4164 פיקסלים מעל ראש המסך, הכותרת ב-0	✓

שני דברים שכדאי לדעת על הבדיקות:

• בדיקה 1 לא נשענת על השאלה לאיזו התאמה ▼ מוביל. זה ממצא 1 ב-#3477, שנשאר מחוץ ל-PR הזה. הבדיקה מוודאת שהנגיעה הגיעה לכפתור, ושההתאמה הפעילה אחריה על המסך ולא מתחת לסרגל.
• בבדיקת ה-Markdown, כל נגיעה מחכה שאף אנימציה לא מזיזה את האלמנט. הכותרות נכנסות לעמוד באנימציה, ונגיעה שנמדדה באמצעה פספסה את הקישור. בטלפון ההכנה מציבה את הכותרת בתחתית המסך, כי תוכן העניינים הצף (#mdToc) מכסה את החלק העליון.

בדיקות קיימות: 808 בדיקות שנוגעות בתבניות ובסגנונות ששונו — עברו. בדיקות הפתקים בדפדפן הריפו ובדיקת-העל של השער (test_browser_suite_is_gated_once.py), יחד עם הבדיקות החדשות — 22, עברו. בדיקות שקוראות את עמודי התיעוד ששונו — 147, עברו. flake8 (הבחירה שחוסמת ב-CI) ו-mypy עברו על קבצי הבדיקות.

מה ה-CI לא יראה: בדיקות הדפדפן מדולגות ב-CI, כי אין שם שלב שמתקין דפדפן (docs/testing.rst). הן רצו כאן, מקומית.

• Unit
• Integration — בדיקות דפדפן מול שרת ומונגו אמיתיים
• Manual — מדידות בדפדפן, כולל בדיקה של כל האלמנטים הצמודים (למטה)

בדיקת כל האלמנטים הצמודים באתר

אחרי השינוי ב-base.html, כל אלמנט עם position: sticky שיושב בתוך .main-content או .container מתחיל להיצמד. לפני השינוי אף אחד מהם לא נצמד (נמדד). מיפיתי את כולם, כולל אלה ש-CodeMirror יוצר בזמן ריצה. כל אחד נבדק בכרומיום ב-1280×800, ב-800×1280 וב-390×844: שהוא נצמד במקום הנכון, שהוא לא יוצא מההורה שלו באף אחד מ-21 מיקומי גלילה, ושהוא לא מכסה תוכן.

אלמנט	איפה	תוצאה
#code-search (סרגל החיפוש)	תצוגת קובץ, בסיסית ומתקדמת, וגם /share/<id> הציבורי	נצמד לראש המסך בשלושת הגדלים. ההתאמות בחיפוש גלויות ולא מתחת לסרגל (בטלפון הסרגל בגובה 152, וההתאמה ב-413)
#md-search	תצוגת Markdown	נצמד לראש המסך. כותרות נוחתות ב-74 (סרגל בגובה 66, ועוד 8), ובטלפון ב-159 (151 ועוד 8)
.theme-builder-sidebar, .theme-builder-controls	בונה הערכות	לרוחב: הסרגל הצדי נצמד ב-16, ולבקרים אין לאן לזוז. אין חפיפות. לאורך ובטלפון, לפני התיקון בקובץ: הבקרים כיסו את התצוגה המקדימה (עד 464×504 פיקסלים), ובטלפון הסרגל הצדי כיסה את הבקרים (עד 350×254). אחרי: אין הצמדה ואין חפיפות
.cm-gutters (CodeMirror)	כל עורך	נצמד לרוחב בלבד (top ו-bottom הם auto), ולכן לא מושפע
.cm-panels-bottom (פאנל החיפוש של CodeMirror)	עורכים שאפשר לערוך בהם	ב-/edit הוא נצמד ל-.codemirror-container, וב-/tools/code ל-.panel.input-panel. לא מושפע. בתצוגת קובץ העורך לקריאה בלבד ולא מקבל פוקוס, ולכן הפאנל לא נפתח שם
.diff-file-header	היסטוריית הריפו	יושב במודאל שמוצמד ל-body, מחוץ למיכלים. לא מושפע

לא נבדק: /tools/json — עורך ה-CodeMirror לא עלה בסביבת הבדיקה.

🧪 בדיקות נדרשות ב‑PR

• 🔍 Code Quality & Security
• Unit Tests (3.11)
• Unit Tests (3.12)
• Unit Tests md-heavy (3.11)
• Unit Tests md-heavy (3.12)

📝 סוג שינוי

• feat: פיצ'ר חדש
• fix: תיקון באג
• docs: שינוי תיעוד בלבד
• refactor: שינוי קוד ללא שינוי התנהגות
• perf: שיפור ביצועים
• chore/ci: תשתית/CI
• breaking change: שינוי שובר תאימות

✅ צ'קליסט

• הקוד עוקב אחרי הסגנון — flake8 (הבחירה שחוסמת ב-CI) ו-mypy עברו על קבצי הפייתון. black ו-isort לא הורצו
• בדיקות רצות ועוברות
• תיעוד עודכן — docs/webapp/theming_and_css.rst, docs/whats-new.rst
• ג'ובים חדשים — לא נוספו
• משתני סביבה — לא נוספו
• טוקנים — לא נוספו. --md-toolbar-h הוא מדידה פנימית של העמוד ולא טוקן של ערכה; הוא מוזכר בכלל החדש ב-theming_and_css.rst
• אין סודות/מפתחות בקוד
• אין מחיקות מסוכנות או פעולות על root
• הודעת הקומיט תואמת Conventional Commits
• CHANGELOG עודכן — docs/whats-new.rst
• כל ה‑Required Checks ירוקים — עוד לא רצו
• צילום/וידאו UI — לא צורף
• עיינתי במסמכי אתר התיעוד — נתיב: docs/webapp/smooth-scrolling.rst | המשפט: "אם צריך גלילה תכנותית — element.scrollIntoView({ block: 'start' }) מספיק". ובנוסף: AI-MAP.md, docs/webapp/theming_and_css.rst, docs/doc-authoring.rst, docs/versioning-stable-anchors.rst, docs/testing.rst

🧩 השפעות/סיכונים

• השינוי ב-base.html חל על כל האתר. כל אלמנט צמוד בתוך .main-content או .container מתחיל להיצמד, וכולם נבדקו (הטבלה למעלה). אלמנט צמוד שיתווסף בעתיד ייצמד כבר מההתחלה, וזה המצב הנכון.
• דפדפן שלא מכיר overflow-x: clip נשאר עם hidden, כלומר עם ההתנהגות של היום.
• לא נבדק: מכשיר אנדרואיד אמיתי (זו אמולציית מגע בכרומיום), שורת כתובת שמתכווצת, מסך מלא עם פסי המערכת, והמקלדת הווירטואלית.
• ממצאים צדדיים, שלא תוקנו כאן:
  • @keyframes fadeIn מוגדר גם ב-bookmarks.css (עם scale(0.8)). בתצוגת ה-Markdown הוא נטען אחרי ההגדרה של md_preview.html (עם translateY(10px)) ודורס אותה. נמדד: הכותרות נכנסות בהגדלה ולא בהחלקה.
  • md_preview.bundle.js ו-md_preview.bundle.css נטענים בלי ?v=, בזמן שלקבצים סטטיים מוגדר cache של שנה (SEND_FILE_MAX_AGE_DEFAULT). זה לפי הקוד; לא נבדק בדפדפן.
  • scroll-behavior: smooth מוגדר על html, אבל מי שגולל הוא body, ולכן קישור עוגן רגיל קופץ בלי אנימציה (נמדד). זה סותר את docs/webapp/smooth-scrolling.rst, ונכנס ל-#3534.

🔗 קישורים

• Issues קשורים: #3534 (העמוד נגלל בתוך body — נפתח מהעבודה הזו), #3477 (ממצא 1 שם, ▼ שקופץ פעמיים בתצוגה הבסיסית, נשאר בחוץ בכוונה)
• רקע: #551 (html, body), #846 (.main-content, .container), #3351 (clip ב-global_search.css), #3409 (אותו שורש כמו ב-#3534, בלוח הפתקים)
• Docs Preview: ה-check של Read the Docs על ה-PR
• Branch Protection & PR Rules

סטיות מהתוכנית שאושרה

1. בונה הערכות. התוכנית לא כללה שינוי בו. הבדיקה שהתבקשה לפני המימוש מצאה שבפריסות הצרות הפריטים הצמודים מכסים תוכן, ולכן ההצמדה מבוטלת שם.
2. גובה הסרגל ב-Markdown. התוכנית דיברה על scroll-margin-top "כמו ה-80 פיקסלים שכבר קיימים". נמדד שבטלפון הסרגל גבוה מ-80, ולכן המרווח נגזר מהגובה שנמדד בפועל.
3. כלי הבדיקה. התוכנית דיברה על קובץ בדיקות חדש בלבד. כלי המגע והדגימה כבר היו קיימים בבדיקות הפתקים, ובמקום עותק שני הם הועברו לקובץ משותף. השינוי בקובץ הקיים הוא מחיקת העותק והוספת ייבוא.
4. console.error בחיפוש של CodeMirror. בחירת ההתאמה הייתה עטופה ב-catch שבולע בשקט. עכשיו כישלון נרשם לקונסול.

🧯 סיכון / החזרה לאחור (Rollback)

• Revert של הקומיט מחזיר את ארבע התקלות. אין שינויי נתונים, אין משתני סביבה ואין מיגרציות.

🤖 Generated with Claude Code

https://claude.ai/code/session_013Pzf4XyLpo6NFzLyZVnWxm

---

Generated by Claude Code

Summary by Sourcery

Fix scrolling and search navigation across file, Markdown, and fullscreen views on touch-oriented layouts.

Bug Fixes:

• Keep file and Markdown search bars pinned while navigating results, and position Markdown headings below the toolbar.
• Make advanced-view search navigation scroll to the next match and center it in the viewport.
• Restore scrolling in advanced fullscreen view and make the final line reachable in basic fullscreen view.

Enhancements:

• Adjust theme builder sticky behavior to prevent controls and previews from overlapping on narrow layouts.
• Share browser touch and polling utilities across browser tests.

Documentation:

• Document using CSS overflow clipping instead of hidden to preserve sticky positioning and record the webapp scrolling fixes.

Tests:

• Add Chromium touch-based browser coverage for file-view search, fullscreen scrolling, and Markdown toolbar anchoring.