From 37ad8d76d0c917db069c9af5629651759de7dd48 Mon Sep 17 00:00:00 2001
From: MAEDA Go <maeda@farend.jp>
Date: Sun, 25 Jan 2026 17:26:48 +0900
Subject: [PATCH] Fix misleading arrow buttons for Available/Selected columns
 on RTL layouts

---
 app/assets/images/icons.svg            | 10 ++++++++++
 app/assets/stylesheets/application.css |  2 +-
 app/views/queries/_columns.html.erb    | 14 ++++++--------
 config/icon_source.yml                 |  4 ++++
 test/system/timelog_test.rb            |  4 ++--
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/app/assets/images/icons.svg b/app/assets/images/icons.svg
index 62384e3f1..a1c94656c 100644
--- a/app/assets/images/icons.svg
+++ b/app/assets/images/icons.svg
@@ -66,6 +66,16 @@
       <path d="M14 7l6 0"/>
       <path d="M17 4l0 6"/>
     </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--arrow-narrow-left">
+      <path d="M5 12l14 0"/>
+      <path d="M5 12l4 4"/>
+      <path d="M5 12l4 -4"/>
+    </symbol>
+    <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--arrow-narrow-right">
+      <path d="M5 12l14 0"/>
+      <path d="M15 16l4 -4"/>
+      <path d="M15 8l4 4"/>
+    </symbol>
     <symbol viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" id="icon--arrow-right">
       <path d="M4 9h8v-3.586a1 1 0 0 1 1.707 -.707l6.586 6.586a1 1 0 0 1 0 1.414l-6.586 6.586a1 1 0 0 1 -1.707 -.707v-3.586h-8a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1z"/>
     </symbol>
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 8aa4b4cdc..20174845b 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -621,7 +621,7 @@ div.table-list.boards .table-list-cell.name {inline-size: 30%;}
 .query-columns label {
   display:block;
 }
-#list-definition .buttons input[type=button] {
+#list-definition .buttons button {
   inline-size:35px;
   display:block;
 }
diff --git a/app/views/queries/_columns.html.erb b/app/views/queries/_columns.html.erb
index da3ae2acf..15e0b987f 100644
--- a/app/views/queries/_columns.html.erb
+++ b/app/views/queries/_columns.html.erb
@@ -11,10 +11,8 @@
               :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
 </div>
 <div class="buttons">
-      <input type="button" value="&#8594;" class="move-right"
-       onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);" />
-      <input type="button" value="&#8592;" class="move-left"
-       onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);" />
+      <button type="button" class="move-right" onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);"><%= sprite_icon("arrow-narrow-right", rtl: true) %></button>
+      <button type="button" class="move-left" onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);"><%= sprite_icon("arrow-narrow-left", rtl: true) %></button>
 </div>
 <div class="query-columns">
       <%= label_tag selected_tag_id, l(:description_selected_columns) %>
@@ -25,10 +23,10 @@
               :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
 </div>
 <div class="buttons">
-      <input type="button" value="&#8648;" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);" />
-      <input type="button" value="&#8593;" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);" />
-      <input type="button" value="&#8595;" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);" />
-      <input type="button" value="&#8650;" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);" />
+      <button type="button" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);">&#8648;</button>
+      <button type="button" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);">&#8593;</button>
+      <button type="button" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);">&#8595;</button>
+      <button type="button" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);">&#8650;</button>
 </div>
 
 <%= javascript_tag do %>
diff --git a/config/icon_source.yml b/config/icon_source.yml
index 0ce2840f4..d5c540e85 100644
--- a/config/icon_source.yml
+++ b/config/icon_source.yml
@@ -248,3 +248,7 @@
   svg: apps
 - name: shield-check
   svg: shield-check
+- name: arrow-narrow-left
+  svg: arrow-narrow-left
+- name: arrow-narrow-right
+  svg: arrow-narrow-right
diff --git a/test/system/timelog_test.rb b/test/system/timelog_test.rb
index 38c3ae19c..d613cfc3f 100644
--- a/test/system/timelog_test.rb
+++ b/test/system/timelog_test.rb
@@ -86,10 +86,10 @@ class TimelogTest < ApplicationSystemTestCase
     visit '/settings?tab=timelog'
     # Remove a column
     select 'Comment', :from => 'Selected Columns'
-    page.first('input[type=button].move-left').click
+    page.first('button.move-left').click
     # Add a column
     select 'Tracker', :from => 'Available Columns'
-    page.first('input[type=button].move-right').click
+    page.first('button.move-right').click
     click_on 'Save'
     assert_text 'Successful update.'
 
-- 
2.50.1