diff --git a/packages/mermaid/src/diagrams/packet/renderer.ts b/packages/mermaid/src/diagrams/packet/renderer.ts
index 21b941a17..2ef4ab7cd 100644
--- a/packages/mermaid/src/diagrams/packet/renderer.ts
+++ b/packages/mermaid/src/diagrams/packet/renderer.ts
@@ -2,7 +2,6 @@ import type { Diagram } from '../../Diagram.js';
 import type { PacketDiagramConfig } from '../../config.type.js';
 import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
 import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
-import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type { PacketDB, PacketWord } from './types.js';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -17,8 +16,8 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
   const svgWidth = bitWidth * bitsPerRow + 2;
   const svg: SVG = selectSvgElement(id);
 
-  configureSvgSize(svg, svgHeight, svgWidth, true);
-  svg.attr('height', svgHeight + 'px');
+  svg.attr('width', '100%');
+  svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
 
   for (const [row, packet] of words.entries()) {
     drawWord(svg, packet, row, config);