diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index db0f7ee..ae43714 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -379,7 +379,8 @@ table.items td {
 }
 /* For <a> to fill <td> completely, we use an ::after pseudoelement. */
 table.items td.link {
-  padding: 0 0 0 1em;
+  padding: 0;
+  padding-inline-start: calc(1em + var(--depth) * 0.8em);
   position: relative;
 }
 table.items td.link a {
diff --git a/app/models/quantity.rb b/app/models/quantity.rb
index 38ff9f1..a613d23 100644
--- a/app/models/quantity.rb
+++ b/app/models/quantity.rb
@@ -19,11 +19,13 @@ class Quantity < ApplicationRecord
       [
         Arel::SelectManager.new.project(
           numbered[Arel.star],
-          numbered.cast(numbered[:child_number], 'BINARY').as('path')
+          numbered.cast(numbered[:child_number], 'BINARY').as('path'),
+          Arel::Nodes.build_quoted(0).as('depth')
         ).from(numbered).where(numbered[:parent_id].eq(nil)),
         Arel::SelectManager.new.project(
           numbered[Arel.star],
-          cte[:path].concat(numbered[:child_number])
+          cte[:path].concat(numbered[:child_number]),
+          cte[:depth] + 1
         ).from(numbered).join(cte).on(numbered[:parent_id].eq(cte[:id]))
       ]
     ).select(cte[Arel.star]).from(cte).order(cte[:path])