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)

frontend/src/features/workspace/OutlinerBlock.tsx

@@ -754,7 +754,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
 
   return (
     <div
-      className={`group relative flex items-start gap-1 py-1 px-1.5 rounded-card transition-all duration-300 ${
+      className={`group relative flex items-start gap-1 py-1 px-0.5 sm:px-1.5 rounded-card transition-all duration-300 ${
         isDragTarget
           ? 'border-t-2 border-accent bg-accent/10'
           : isTargeted
@@ -762,7 +762,10 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
           : ''
       } ${block.conflictOf ? 'border-l-2 border-status-warn bg-status-warn/5' : ''}`}
       style={{
-        paddingLeft: `${visualLevel * 22 + 4}px`,
+        // Indent per level and room kept for text come from CSS (narrower on phones, see index.css);
+        // deep rows get wider than the screen and the note scrolls sideways instead of squeezing them
+        paddingLeft: `calc(var(--outline-indent) * ${visualLevel} + 4px)`,
+        minWidth: `calc(var(--outline-indent) * ${visualLevel} + var(--outline-min-text))`,
       }}
       onDragOver={(e) => onDragOverBlock?.(e, index)}
       onDrop={() => onDropBlock?.(index)}
@@ -1252,7 +1255,8 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
       <button
         type="button"
         onClick={() => onZoomBlock?.(block.id)}
-        className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
+        // Phones zoom by tapping the bullet; the button would only take width from the text there
+        className="hidden sm:block opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-accent rounded-btn transition-opacity shrink-0"
         title="In diesen Ast hineinzoomen (Fokus-Modus)"
       >
         <Maximize2 className="w-3.5 h-3.5" />
@@ -1269,7 +1273,7 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
         </span>
       )}
 
-      {/* Delete button on hover (Trash2 icon) */}
+      {/* Delete button on hover (Trash2 icon); on phones only in the row being edited */}
       {canEdit && (
         <button
           type="button"
@@ -1282,7 +1286,11 @@ export const OutlinerBlock: React.FC<OutlinerBlockProps> = ({
               onDeleteBlockRef.current(block.id, false);
             }
           }}
-          className="opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer"
+          className={
+            activeFocus
+              ? 'opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer'
+              : 'hidden sm:block opacity-0 group-hover:opacity-100 focus:opacity-100 p-0.5 text-faint hover:text-status-err rounded-btn transition-opacity shrink-0 cursor-pointer'
+          }
           title="Block löschen"
         >
           <Trash2 className="w-3.5 h-3.5" />