Specify svg max size by CSS

interactive/index.html

@@ -139,7 +139,7 @@ <h3>使い方</h3>
 <li>左側の一覧からデザインを選ぶと右側の数値が変わります。</li>
 <li>すべての値は相対値です（単位はありません）。自動的に拡大・縮小されます。</li>
 <li>デザイン上の都合により、いくつかの値は他の値によって範囲が制限されます（「垂直ステムの間隔」は常に「垂直ステムの太さ」より大きい、など）。</li>
-<li>表示部の高さはウィンドウの幅によって変化します。画面が横長の場合はウィンドウの幅を狭めて「反映」ボタンをクリックするといいかもしれません。</li>
+<li>表示部の高さはウィンドウの幅によって変化します。画面が横長の場合はウィンドウの幅を狭めるといいかもしれません。</li>
 <li>デフォルトではテキスト・値の変更は即座に反映されます。重すぎる場合は「自動プレビュー」のチェックを外してみるといいかもしれません（反映するには「反映」ボタンを押します）。</li>
 </ul>
 </div>

interactive/src/components/Preview.module.css

@@ -2,3 +2,8 @@
   background-color: #fff;
   color: #000;
 }
+
+.chararea > svg {
+  width: 100%;
+  aspect-ratio: 4 / 1;
+}

interactive/src/components/Preview.tsx

@@ -15,15 +15,11 @@ export const Preview: FC<PreviewProps> = ({
   width,
   height,
 }: PreviewProps) => {
-  const maxWidth = document.body.clientWidth - 100;
-  const maxHeight = maxWidth * 0.25;
   return (
     <div className={style.chararea}>
       <svg
         viewBox={`0 0 ${width} ${height}`}
         preserveAspectRatio="xMinYMid meet"
-        width={maxWidth}
-        height={maxHeight}
       >
         {glyphs.map(({ dList, offsetX }, i) => (
           <g key={i} transform={`translate(${offsetX},0)`}>