making the spacing of the aa letters and numbers scale more nicely in…

… the row view #822

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v17.5.6](https://github.com/TeselaGen/openVectorEditor/compare/v17.3.12...v17.5.6)
+#### [v17.5.7](https://github.com/TeselaGen/openVectorEditor/compare/v17.3.12...v17.5.7)
 
 - Added rounded corners to amino acids [`#819`](https://github.com/TeselaGen/openVectorEditor/pull/819)
 - small selection color style fix https://github.com/TeselaGen/lims/issues/9038#event-6627607729 [`#9038`](https://github.com/TeselaGen/lims/issues/9038)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "open-vector-editor",
-  "version": "17.5.6",
+  "version": "17.5.7",
   "description": "Teselagen's Open Source Vector Editor",
   "main": "lib/index.js",
   "module": "es/index.js",

src/RowItem/Translations/AASliver.js

@@ -105,7 +105,6 @@ function AASliver(props) {
                   L ${roundedCorner * dirX2}, ${roundedCorner * dirY2}
                   Q 0 0 ${roundedCorner / 3} 0
                   z`;
-
   return (
     <>
       <g
@@ -159,7 +158,9 @@ function AASliver(props) {
             fontSize={25}
             stroke="black"
             strokeWidth={2}
-            transform={`scale(3,3) translate(${forward ? 45 : 55},21)`}
+            transform={`scale(${(3 / width) * 10},3) translate(${
+              ((forward ? 45 : 55) * width) / 10
+            },21)`}
             x="0"
             y="4"
             style={{ textAnchor: "middle" }}
@@ -173,7 +174,9 @@ function AASliver(props) {
             fontSize={25}
             stroke="black"
             strokeWidth={2}
-            transform={`scale(3,3) translate(${forward ? 45 : 55},51)`}
+            transform={`scale(${(3 / width) * 10},3) translate(${
+              ((forward ? 45 : 55) * width) / 10
+            },51)`}
             x="0"
             y="4"
             style={{ textAnchor: "middle" }}