🐛 Move distributed alignment to the language layout sections

The fifth alignment button made the first row of the text options 36px
wider than the sidebar grid: the options button fell outside it and the
panel scrolled sideways.

Distributed alignment is an East Asian convention (均等割り付け, 分散对齐,
배분 정렬), so it moves out of the alignment group into a switch of the
Japanese, Chinese and Korean layout sections, shown when the text's
language matches. Turning it off aligns the text to the start. The label
shortens to fit beside the switch.

AI-assisted-by: claude-opus-5-5

frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs

@@ -84,11 +84,7 @@
            {:value "justify"
             :id    "text-align-justify"
             :label (tr "workspace.options.text-options.text-align-justify")
-            :icon  (if vertical? i/text-justify-vertical i/text-justify)}
-           {:value "distribute"
-            :id    "text-align-distribute"
-            :label (tr "workspace.options.text-options.text-align-distribute")
-            :icon  (if vertical? i/distribute-vertical-spacing i/distribute-horizontally)}])
+            :icon  (if vertical? i/text-justify-vertical i/text-justify)}])
 
         handle-change
         (mf/use-fn

frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs

@@ -9,6 +9,8 @@
   (:require
    [app.common.types.text.cjk-layout :as cjk]
    [app.main.ui.ds.controls.select :refer [select*]]
+   [app.main.ui.ds.controls.switch :refer [switch*]]
+   [app.main.ui.workspace.sidebar.options.common :refer [radio-selected]]
    [app.main.ui.workspace.sidebar.options.menus.text-japanese-layout :as tjl]
    [app.util.i18n :refer [tr]]
    [app.util.text.layout :as tl]
@@ -130,6 +132,24 @@
              (mf/spread-props props {:values ruby-values
                                      :on-change on-ruby-presentation-change})]))])]))
 
+(mf/defc distribute-option*
+  "Distributed alignment (均等割り付け, 分散对齐, 배분 정렬): spreads the
+  characters of every line over the box. Turning it off aligns the text to
+  the start."
+  [{:keys [values on-change on-blur]}]
+  (let [label (tr "workspace.options.text-options.text-align-distribute")
+        handle-change
+        (mf/use-fn
+         (mf/deps on-change on-blur)
+         (fn [checked?]
+           (on-change {:text-align (if checked? "distribute" "left")})
+           (when (some? on-blur) (on-blur))))]
+    [:div {:class (stl/css :distribute-option)}
+     [:span {:class (stl/css :option-label)} label]
+     [:> switch* {:default-checked (= "distribute" (radio-selected (:text-align values)))
+                  :aria-label      label
+                  :on-change       handle-change}]]))
+
 (mf/defc language-layout-options*
   [{:keys [language values ruby-values text-selection-active reading-selection-active zhuyin-selection-active
            on-change on-ruby-presentation-change on-blur]}]
@@ -149,6 +169,8 @@
                    :aria-label (tr "workspace.options.text-options.language-profile")
                    :options options
                    :on-change handle-profile-change}]]
+     (when matches?
+       [:> distribute-option* props])
      (if (and (= :japanese language) matches?)
        [:> tjl/japanese-layout-options*
         (mf/spread-props props {:ruby-values ruby-values

frontend/src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.scss

@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
 @use "ds/typography.scss" as t;
+@use "ds/_sizes.scss" as *;
 
 .language-layout-options {
   display: flex;
@@ -20,6 +21,14 @@
   gap: var(--sp-s);
 }
 
+.distribute-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sp-s);
+  min-block-size: $sz-32;
+}
+
 .option-label {
   @include t.use-typography("body-small");
 

frontend/test/frontend_tests/ui/text_options_test.cljs

@@ -406,17 +406,25 @@
 
 (t/deftest vertical-paragraph-alignment-shows-top-middle-bottom-and-vertical-justify
   (let [markup (alignment-markup text-menu/text-align-options* "vertical-rl" true)]
-    (t/is (= ["text-align-top" "text-align-middle" "text-align-bottom" "text-justify-vertical" "distribute-vertical-spacing"]
+    (t/is (= ["text-align-top" "text-align-middle" "text-align-bottom" "text-justify-vertical"]
              (alignment-icons markup)))
     (t/is (= ["workspace.options.text-options.align-top"
               "workspace.options.text-options.align-middle"
               "workspace.options.text-options.align-bottom"
-              "workspace.options.text-options.text-align-justify"
-              "workspace.options.text-options.text-align-distribute"]
+              "workspace.options.text-options.text-align-justify"]
              (alignment-labels markup)))
-    (t/is (= ["left" "center" "right" "justify" "distribute"]
+    (t/is (= ["left" "center" "right" "justify"]
              (mapv second (re-seq #"value=\"([^\"]+)\"" markup))))))
 
+(t/deftest distributed-alignment-is-a-switch-of-the-language-layout
+  (let [markup  #(alignment-markup tll/distribute-option* "horizontal-tb" true {:text-align %})
+        checked #(second (re-find #"aria-checked=\"([^\"]+)\"" %))]
+    (t/is (= ["workspace.options.text-options.text-align-distribute"]
+             (alignment-labels (markup "left"))))
+    (t/is (= "true" (checked (markup "distribute"))))
+    (t/is (= "false" (checked (markup "left"))))
+    (t/is (= "false" (checked (markup :multiple))))))
+
 (t/deftest vertical-column-block-alignment-shows-right-center-and-left
   (let [markup (alignment-markup text-menu/vertical-align* "vertical-rl" true)]
     (t/is (= ["text-right" "text-horizontal-center" "text-left"]
@@ -432,14 +440,14 @@
   (doseq [writing-mode [nil "horizontal-tb" :multiple]]
     (let [paragraph (alignment-markup text-menu/text-align-options* writing-mode true)
           block     (alignment-markup text-menu/vertical-align* writing-mode true)]
-      (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify" "distribute-horizontally"]
+      (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify"]
                (alignment-icons paragraph)))
       (t/is (= ["text-top" "text-middle" "text-bottom"] (alignment-icons block))))))
 
 (t/deftest svg-renderer-keeps-horizontal-alignment-for-stored-vertical-text
   (let [paragraph (alignment-markup text-menu/text-align-options* "vertical-rl" false)
         block     (alignment-markup text-menu/vertical-align* "vertical-rl" false)]
-    (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify" "distribute-horizontally"]
+    (t/is (= ["text-align-left" "text-align-center" "text-align-right" "text-justify"]
              (alignment-icons paragraph)))
     (t/is (= ["text-top" "text-middle" "text-bottom"] (alignment-icons block)))
     (t/is (= "workspace.options.text-options.text-align-left" (first (alignment-labels paragraph))))

frontend/translations/en.po

@@ -8311,9 +8311,9 @@ msgstr "Strikethrough (%s)"
 msgid "workspace.options.text-options.text-align-center"
 msgstr "Align center"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:77
+#: src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs
 msgid "workspace.options.text-options.text-align-distribute"
-msgstr "Distribute characters on every line"
+msgstr "Distribute characters"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs
 msgid "workspace.options.text-options.text-align-justify"

frontend/translations/es.po

@@ -8259,9 +8259,9 @@ msgstr "Tachado (%s)"
 msgid "workspace.options.text-options.text-align-center"
 msgstr "Alinear al centro"
 
-#: src/app/main/ui/workspace/sidebar/options/menus/text.cljs:77
+#: src/app/main/ui/workspace/sidebar/options/menus/text_language_layout.cljs
 msgid "workspace.options.text-options.text-align-distribute"
-msgstr "Distribuir caracteres en todas las líneas"
+msgstr "Distribuir caracteres"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/text.cljs
 msgid "workspace.options.text-options.text-align-justify"