`show-line-number` adds inconsistent left padding based on line count

[AntonioGiordano12]

When the show-line-number prop is enabled, vue-json-pretty applies dynamic left padding to account for the width of the line number column. This padding is calculated based on the total number of lines, which causes the JSON content to shift horizontally depending on how many digits the line numbers use.

This behavior makes it impossible to align multiple JSON blocks consistently, especially when they display different amounts of data. It appears this was introduced in [PR #216].

---

🐛 Bug Report

✅ Expected Behavior

Line numbers should not cause unpredictable horizontal shifts in content. The left padding should be consistent or at least configurable, to ensure alignment across multiple instances.

❌ Actual Behavior

The component currently calculates left padding dynamically based on the number of digits in the line numbers:

• Fewer than 10 lines → 1-digit numbers → padding-left: 12px
• 10–99 lines → 2-digit numbers → padding-left: 24px
• 100+ lines → 3-digit numbers → padding-left: 36px

This leads to JSON content being pushed further to the right as the number of lines increases — even if the content structure is the same.

🔁 Reproduction Code

<template>
  <vue-json-pretty :data="smallData" :show-line-number="true" />
  <vue-json-pretty :data="largeData" :show-line-number="true" />
</template>

<script setup>
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";

const smallData = [{ item: "value1" }, { item: "value2" }];

const largeData = Array.from({ length: 50 }, (_, i) => ({
  item: `value${i}`,
}));
</script>

🎯 Impact

• Inconsistent layout when displaying multiple components (e.g. side-by-side, or stacked with expectations of alignment).
• Can't override this behavior with global styles, scoped styles, or runtime DOM manipulation — padding is inline and dynamic.

---

✅ Desired Outcome

Not requesting the removal of the line number space, but would appreciate one of the following:

• A prop like lineNumberColumnWidth or fixedLineNumberPadding to manually define a consistent width (e.g. always 36px)
• Or, expose a CSS class/hook to let us override the default inline padding behavior.

---

Let me know if more details, screenshots, or PR assistance would help. Thanks for the great work on the package!

[leezng]

Dynamic calculation was originally intended to avoid content overflow when the number of lines is large. For fixed width, this demand was not taken into account when it was designed.

Thanks for your suggestion to add props. I think it can be tried.