fix(workspace): more room for notes on phones

Almost no side margin, 14 px indent per level (22 px from tablet width
on), zoom and delete buttons only take width in the active row. Very deep
rows keep about 14rem and the note scrolls sideways instead of squeezing
the text.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/workspace/DocumentEditor.tsx

@@ -883,7 +883,8 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
       )}
 
       {/* Main Content Area */}
-      <div className="w-full px-4 sm:px-8 py-5 flex-1">
+      {/* Phones: almost no side margin; very deep outlines scroll sideways (rows keep a minimum width) */}
+      <div className="w-full pl-2 pr-1 sm:px-8 py-5 flex-1 overflow-x-auto sm:overflow-x-visible [-webkit-overflow-scrolling:touch]">
         {zoomedBlock ? (
           /* =========================================================================
              FOKUS-MODUS & ZOOM-IN (HOISTED SUBTREE VIEW)