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