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>

CHANGELOG.md

@@ -17,6 +17,7 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Code-Blöcke in Notizen: Sprachauswahl (rund 50 Sprachen, bei Bedarf nachgeladen), Farben beim Tippen im Stil von VS Code Dark+/Light+ für alle Themes, „Kopieren“, Tab/Shift+Tab rückt ein und aus. `/code yaml` oder ```` ```yaml ```` legt die Sprache direkt fest.
 
 ### Changed
+- Notizen auf dem Handy: fast kein Seitenrand mehr, Einrückung 14 statt 22 px pro Ebene, Zoom- und Löschknopf belegen nur noch in der aktiven Zeile Platz. Sehr tief verschachtelte Punkte behalten eine lesbare Breite, die Notiz lässt sich dann seitlich verschieben statt den Text zu quetschen.
 - E-Mails zeigen einen Absendernamen: `SMTP_FROM_NAME` bzw. das neue Feld „Absender-Name“ in Administration → E-Mail (Standard „MindSift“), wenn die Absenderadresse keinen eigenen Namen enthält.
 - Slash-Befehle einheitlich englisch: `/image` statt `/bild` (`/bild` findet ihn weiterhin), kürzere Beschreibungen, breiteres Menü ohne Umbrüche.
 - `docker-compose.yml` enthält nur noch die Zuordnungen; alle Erklärungen zu den Variablen stehen in `.env.example`. Neu durchgereicht werden `TZ`, `TRUSTED_PROXIES`, `LOGIN_PROTECTION`, `DEMO_RESET_MINUTES` und `LEGAL_*_CONTENT`, die vorher in `.env` gesetzt wirkungslos blieben.

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" />

frontend/src/index.css

@@ -549,3 +549,16 @@ fieldset:disabled :is(button, input, select, textarea) {
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* Outliner: indent per level and the width a row keeps for its text. Phones indent less and let very
+   deep rows run wider than the screen (the note then scrolls sideways) instead of squeezing the text. */
+:root {
+  --outline-indent: 14px;
+  --outline-min-text: 14rem;
+}
+@media (min-width: 640px) {
+  :root {
+    --outline-indent: 22px;
+    --outline-min-text: 0px;
+  }
+}