The AI prompt that caused my page to continously increase in size

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.

This is a submission for DEV's Summer Bug Smash: Smash Stories powered by Sentry. Introduction I usually use AI to do repetitive frontend tasks, this time round the intention was to make a website page responsive. After making the prompt, the result was a page that was in an infinite loop of increasing in width. Disclaimer This happenned after the challenge was announced. The video of the page was recorded and I thought it would be an interesting submission. The video below shows the behaviour of the page. Background The technology used was Sveltekit 5 along with HTML, CSS and Javascript. The section of the page that increased in width, had 4 progress circles to display data and below them were bar and line graphs that were rendered using Svelteplot visualization framework . The code was as follows: <div class="analytics-section" { if errorMessage} <h1 class="analytics-title" Events</h1 <div class="progress-block" <div class="progress" <Progress maximum={total} value={current} name="Amount" size=150 width=21 / </div <div class="sections-block" <h1 class="other-title" Sections</h1 <div class="sections" { each uMessage as section} <Progress maximum={section "amount" section "capacity" } value={TotalTicketsperSection section "seats" section "amount" } name={section "name" } size=100 width=21 / {/each} </div </div </div <div class="progress-charts" <div class="progress-chart" <h1 class="other-title" Tickets Selling Rate</h1 <Plot x={{label: "Section"}} y={{label: "ticket selling rate % ", domain: 0, 100 }} <RuleY data={ 0 }/ <BarY data={tickets} x="section" y="tickets" fill="teal"/ <Text data={tickets} x="section" y="tickets" text="tickets" lineAnchor="bottom" dy={-5} / </Plot </div <div class="progress-chart" <h1 class="other-title" Time Tickets Sold</h1 <Plot x={{label: "Time"}} y={{label:"Tickets"}} <Line data={booking} x="time" y="tickets" / </Plot </div </div {:else} <div class="error-container" <p class="error-message" {errorMessage}</p </div {/if} </div The Fix: Explained After hours of searching through documentation, I finally found the issue. The parent element whose class is analytics-section its width wasn't set while progress-charts and progress-chart both had a width of 100%, padding of 1.5rem each. This setup was what ultimately caused the infinite loop. Svelte usually determines the width of a parent element "analytics-section" using the ResizeObserver while Svelteplot automatically scales and fills 100% of its parent element width. "progress-chart" Since both "progress-chart" and "progress-charts" width were set to 100%, padding 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, this caused the parent element's width to increase in size as well and Svelte being reactive, it used the ResizeObserver to obtain the new width. This process was repeated over and over resulting in an infinite loop. The fix was as follows: .analytics-section { width: 100vw; min-height: 100vh; background-color: f8f8f8; padding: 1rem; } .progress-charts { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; width: auto; padding: 1.5rem; background: rgba 255, 255, 255, 0.7 ; border-radius: 15px; box-shadow: 0 8px 32px rgba 0, 0, 0, 0.1 ; backdrop-filter: blur 4px ; } .progress-chart { background: linear-gradient 135deg, ffffff 0%, f8f9fa 100% ; border-radius: 15px; padding: 1.5rem; width: 100%; box-shadow: 0 4px 15px rgba 0, 0, 0, 0.08 ; flex: 1 1 100%; min-width: 280px; } @media min-width: 1000px { .progress-chart{ max-width: 300px; } } All these changes eventually resulted in a page that worked as expected. Although there are other ways of solving this problem, I found this to be best option for the website.