{"slug": "the-ai-prompt-that-caused-my-page-to-continously-increase-in-size", "title": "The AI prompt that caused my page to continously increase in size", "summary": "A developer encountered an infinite loop that continuously increased a webpage's width after using an AI prompt to make a SvelteKit 5 page responsive. The issue was traced to parent and child elements both having 100% width with padding, causing a ResizeObserver feedback loop. The fix involved setting the parent's width to 100vw and adjusting child widths to auto.", "body_md": "*This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry.*\n\n**Introduction**\n\nI usually use AI to do repetitive frontend tasks, this time round the intention was to make a website page responsive.\n\nAfter making the prompt, the result was a page that was in an infinite loop of increasing in width.\n\nDisclaimer\n\nThis happenned after the challenge was announced.\n\nThe video of the page was recorded and I thought\n\nit would be an interesting submission.\n\nThe video below shows the behaviour of the page.\n\n**Background**\n\nThe technology used was Sveltekit 5 along with HTML, CSS and Javascript.\n\nThe section of the page that increased in width, had 4 progress\ncircles to display data and below them were bar and line graphs that were rendered using Svelteplot (visualization framework).\n\nThe code was as follows:\n\n```\n<div class=\"analytics-section\">\n    {#if !errorMessage}\n        <h1 class=\"analytics-title\">Events</h1>\n        <div class=\"progress-block\">\n            <div class=\"progress\">\n                <Progress maximum={total} value={current} name=\"Amount\" size=150 width=21 />\n            </div>\n\n            <div class=\"sections-block\">\n                <h1 class=\"other-title\">Sections</h1>\n                <div class=\"sections\">\n                    {#each uMessage as section}\n                        <Progress maximum={section[\"amount\"]*section[\"capacity\"]} value={TotalTicketsperSection(section[\"seats\"])*section[\"amount\"]} name={section[\"name\"]} size=100 width=21 />\n                    {/each}\n                </div>\n            </div>\n        </div>\n        <div class=\"progress-charts\">\n            <div class=\"progress-chart\">\n                <h1 class=\"other-title\">Tickets Selling Rate</h1>\n\n                <Plot x={{label: \"Section\"}} y={{label: \"ticket selling rate (%)\", domain: [0, 100]}} >\n                    <RuleY data={[0]}/>\n                    <BarY data={tickets} x=\"section\" y=\"tickets\" fill=\"teal\"/>\n\n                    <Text data={tickets} x=\"section\" y=\"tickets\" text=\"tickets\" lineAnchor=\"bottom\" dy={-5} />\n                </Plot>\n\n            </div>\n\n            <div class=\"progress-chart\">\n                <h1 class=\"other-title\">Time Tickets Sold</h1>\n\n                <Plot x={{label: \"Time\"}} y={{label:\"Tickets\"}}>\n                    <Line data={booking} x=\"time\" y=\"tickets\" />\n                </Plot>\n            </div>\n        </div>\n    {:else}\n        <div class=\"error-container\">\n            <p class=\"error-message\">{errorMessage}</p>\n        </div>\n    {/if}\n</div>\n```\n\n**The Fix: Explained**\n\nAfter hours of searching through documentation, I finally found the issue.\n\nThe parent element whose class is `analytics-section`\n\nits width wasn't set while `progress-charts`\n\nand `progress-chart`\n\nboth\n\nhad a width of 100%, padding of 1.5rem each.\n\nThis setup was what ultimately caused the infinite loop.\n\nSvelte usually determines the width of a parent element (\"analytics-section\") using the [ResizeObserver] while\nSvelteplot automatically scales and fills 100% of its parent element width.(\"progress-chart\")\n\nSince both \"progress-chart\" and \"progress-charts\" width were set to 100%,\npadding also set to 1.5rem for both the resulting total width was more than the parent element's width container that was determined by Svelte,\nthis caused the parent element's width to increase in size as well and\nSvelte being reactive, it used the ResizeObserver to obtain the new width.\n\nThis process was repeated over and over resulting in an infinite loop.\n\nThe fix was as follows:\n\n```\n.analytics-section {\n    width: 100vw;\n    min-height: 100vh;\n    background-color: #f8f8f8;\n    padding: 1rem;\n}\n.progress-charts {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1.5rem;\n    justify-content: center;\n    width: auto;\n    padding: 1.5rem;\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 15px;\n    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n    backdrop-filter: blur(4px);\n}\n\n.progress-chart {\n    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n    border-radius: 15px;\n    padding: 1.5rem;\n    width: 100%;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\n    flex: 1 1 100%;\n    min-width: 280px;\n}\n@media(min-width: 1000px){\n    .progress-chart{\n        max-width: 300px;\n    }\n}\n```\n\nAll these changes eventually resulted in a page that worked as expected.\n\nAlthough there are other ways of solving this problem, I\nfound this to be best option for the website.", "url": "https://wpnews.pro/news/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size", "canonical_source": "https://dev.to/wdaily/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size-35be", "published_at": "2026-08-21 13:21:52+00:00", "updated_at": "2026-08-21 13:44:46.502067+00:00", "lang": "en", "topics": ["developer-tools"], "entities": ["SvelteKit", "Svelteplot", "ResizeObserver"], "alternates": {"html": "https://wpnews.pro/news/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size", "markdown": "https://wpnews.pro/news/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size.md", "text": "https://wpnews.pro/news/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size.txt", "jsonld": "https://wpnews.pro/news/the-ai-prompt-that-caused-my-page-to-continously-increase-in-size.jsonld"}}