From 66468f7e30afe0cd30087dfd45427c5b67303fd0 Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Thu, 6 Aug 2026 16:28:11 +0100
Subject: [PATCH 1/2] Give big tablets mobile search

---
 main/blocklyinit.js | 13 +++++++------
 style/blockly.css   |  7 +++++--
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/main/blocklyinit.js b/main/blocklyinit.js
index 7ba4e028..768a5cc8 100644
--- a/main/blocklyinit.js
+++ b/main/blocklyinit.js
@@ -46,6 +46,9 @@ import {
 } from '../ui/blocklyutil.js';
 import { toolbox as toolboxDef } from '../toolbox.js';
 
+const mobileSearchMediaQuery = '(max-width: 768px), (max-width: 899px) and (pointer: coarse)';
+const isMobileSearchLayout = () => window.matchMedia(mobileSearchMediaQuery).matches;
+
 // Priority 0 — below the 'blocks' serializer's 20, so blocks exist before locks are re-applied.
 if (!Blockly.serialization.registry.getClass?.('flockLock')) {
   Blockly.serialization.registry.register('flockLock', {
@@ -762,7 +765,7 @@ export function initializeWorkspace() {
     searchInput.placeholder = translate('toolbox_search_placeholder');
 
     let originalParent = searchInput.parentElement;
-    const isMobile = () => window.matchMedia('(max-width: 768px)').matches;
+    const isMobile = isMobileSearchLayout;
     const isMobileResults = () => window.matchMedia('(max-width: 480px)').matches;
 
     // Get the toolbox search category (used to override matchBlocks and to
@@ -1074,8 +1077,7 @@ export function initializeWorkspace() {
     cancelBtn.addEventListener('mousedown', (e) => e.preventDefault());
     cancelBtn.addEventListener('click', closeOverlay);
 
-    // Close search overlay if screen resizes above tablet size (768px)
-    window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
+    window.matchMedia(mobileSearchMediaQuery).addEventListener('change', (e) => {
       if (!e.matches && overlay.isConnected) closeOverlay();
     });
 
@@ -1117,8 +1119,7 @@ export function initializeWorkspace() {
   const originalOpen = workspaceSearch.open.bind(workspaceSearch);
   const originalClose = workspaceSearch.close.bind(workspaceSearch);
 
-  // Mobile workspace search bar (≤480px): full-width fixed bar with prev/next
-  const isMobileWS = () => window.matchMedia('(max-width: 768px)').matches;
+  const isMobileWS = isMobileSearchLayout;
 
   const wsMobileBar = document.createElement('div');
   wsMobileBar.className = 'ws-search-mobile-bar';
@@ -1207,7 +1208,7 @@ export function initializeWorkspace() {
   wsMobileClose.addEventListener('mousedown', (e) => e.preventDefault());
   wsMobileClose.addEventListener('click', () => workspaceSearch.close());
 
-  window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
+  window.matchMedia(mobileSearchMediaQuery).addEventListener('change', (e) => {
     if (!e.matches && wsMobileBar.isConnected) workspaceSearch.close();
   });
 
diff --git a/style/blockly.css b/style/blockly.css
index 58c77b73..ffaaac2e 100644
--- a/style/blockly.css
+++ b/style/blockly.css
@@ -817,7 +817,9 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
     margin: 0;
     box-sizing: border-box;
   }
+}
 
+@media (max-width: 768px), (max-width: 899px) and (pointer: coarse) {
   /* Expanded search overlay — appended to body so it escapes toolbox overflow/transforms */
   .mobile-search-overlay::before {
     content: '';
@@ -957,7 +959,8 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
   }
 }
 
-@media (min-width: 481px) and (max-width: 768px) {
+@media (min-width: 481px) and (max-width: 768px),
+  (min-width: 481px) and (max-width: 899px) and (pointer: coarse) {
   .mobile-search-overlay.expanding {
     animation: mobile-search-expand 0.2s ease-out forwards;
   }
@@ -966,7 +969,7 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 768px), (max-width: 899px) and (pointer: coarse) {
   .ws-search-mobile-bar::before {
     content: '';
     position: absolute;

From d2ce69ac439026d247f8aa821c29a0a451fab21b Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Thu, 6 Aug 2026 16:31:53 +0100
Subject: [PATCH 2/2] Fix text contrast in dark 2

---
 style/blockly.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/style/blockly.css b/style/blockly.css
index ffaaac2e..5110383d 100644
--- a/style/blockly.css
+++ b/style/blockly.css
@@ -896,7 +896,7 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
 
   .mobile-search-empty {
     padding: 24px 16px;
-    color: var(--color-text);
+    color: var(--color-text-primary);
     opacity: 0.6;
     font-size: 15px;
     text-align: center;
@@ -924,7 +924,7 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
 
   .mobile-search-result-name {
     font-size: 16px;
-    color: var(--color-text);
+    color: var(--color-text-primary);
     flex: 1;
   }
 
@@ -1004,7 +1004,7 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
     border-radius: 4px;
     outline: none;
     padding: 0 8px;
-    color: var(--color-text);
+    color: var(--color-text-primary);
     background: var(--color-bg);
   }
 
@@ -1015,7 +1015,7 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
 
   .ws-search-mobile-count {
     font-size: 13px;
-    color: var(--color-text);
+    color: var(--color-text-primary);
     opacity: 0.7;
     min-width: 36px;
     text-align: center;