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

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 various 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's 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 analytics-section's width that was determined by Svelte.

This caused the analytics-section'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:

• Adding 100vw to the div of class analytics-section.

.analytics-section {
   width: 100vw;
    min-height: 100vh;
    background-color: #f8f8f8;
    padding: 1rem;
}

• Changing the width in progress-charts and progress-chart to auto.

.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;
}

• Setting a max-width to progress-chart on screens larger then 1000px.

@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.