From e5f7cf0176bed0d73cd2edc47e88ee693ba78144 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20M=C3=BCller?= <elias@elias-mueller.com>
Date: Thu, 16 Jul 2026 21:43:52 +0200
Subject: [PATCH] updated the ProseMirror table view to conditionally hide the
 mode toggle toolbar when content fits within the available width, ensuring
 the toggle is only visible for overflowing tables.

---
 lib/widget/prosemirror/pm_table_view.dart | 40 ++++++++++++++++-------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/lib/widget/prosemirror/pm_table_view.dart b/lib/widget/prosemirror/pm_table_view.dart
index 4a425fd..ddc91b1 100644
--- a/lib/widget/prosemirror/pm_table_view.dart
+++ b/lib/widget/prosemirror/pm_table_view.dart
@@ -39,6 +39,10 @@ class _PmTableViewState extends State<PmTableView> {
   bool _showLeftShadow = false;
   bool _showRightShadow = false;
 
+  /// Whether the table is too wide to fit and therefore needs the mode toggle.
+  /// Measured from the natural (scroll) layout's overflow — see [_updateShadows].
+  bool _overflows = false;
+
   @override
   void dispose() {
     _scroll.dispose();
@@ -83,15 +87,24 @@ class _PmTableViewState extends State<PmTableView> {
 
     return ValueListenableBuilder<PmTableMode>(
       valueListenable: pmTableMode,
-      builder: (context, mode, _) => Column(
-        crossAxisAlignment: CrossAxisAlignment.stretch,
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          _Toolbar(mode: mode),
-          const SizedBox(height: AppSpacing.xs),
-          _body(context, mode, rows.length, columnCount, placements),
-        ],
-      ),
+      builder: (context, mode, _) {
+        // When the table already fits, the mode is moot: render the natural
+        // grid (which shows identically and won't scroll) and hide the toggle,
+        // exactly like the web ticker. The scroll layout keeps measuring the
+        // overflow so the toggle reappears if the width or content changes.
+        final effectiveMode = _overflows ? mode : PmTableMode.scroll;
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (_overflows) ...[
+              _Toolbar(mode: mode),
+              const SizedBox(height: AppSpacing.xs),
+            ],
+            _body(context, effectiveMode, rows.length, columnCount, placements),
+          ],
+        );
+      },
     );
   }
 
@@ -166,8 +179,11 @@ class _PmTableViewState extends State<PmTableView> {
     final canScroll = pos.maxScrollExtent > 0.5;
     final showLeft = canScroll && pos.pixels > 0.5;
     final showRight = canScroll && pos.pixels < pos.maxScrollExtent - 0.5;
-    if (showLeft != _showLeftShadow || showRight != _showRightShadow) {
+    if (canScroll != _overflows ||
+        showLeft != _showLeftShadow ||
+        showRight != _showRightShadow) {
       setState(() {
+        _overflows = canScroll;
         _showLeftShadow = showLeft;
         _showRightShadow = showRight;
       });
@@ -235,8 +251,8 @@ class _PmTableViewState extends State<PmTableView> {
   }
 }
 
-/// Compact segmented control that toggles [pmTableMode]. Always visible so the
-/// modes are discoverable; a tap switches every table on screen at once.
+/// Compact segmented control that toggles [pmTableMode]. Only shown for tables
+/// wide enough to need it; a tap switches every table on screen at once.
 class _Toolbar extends StatelessWidget {
   final PmTableMode mode;