Repairing Responsive Layout Failures Using Retrieval Augmented Generation

Responsive websites frequently experience distorted layouts at specific screen sizes, called Responsive Layout Failures (RLFs). Manually repairing these RLFs involves tedious trial-and-error adjustments of HTML elements and CSS properties. In this study, an automated repair approach, leveraging LLM combined with domain-specific knowledge is proposed. The approach is named ReDeFix, a Retrieval-Augmented Generation (RAG)-based solution that utilizes Stack Overflow (SO) discussions to guide LLM on CSS repairs. By augmenting relevant SO knowledge with RLF-specific contexts, ReDeFix creates a prompt that is sent to the LLM to generate CSS patches. Evaluation demonstrates that our approach achieves an 88% accuracy in repairing RLFs. Furthermore, a study from software engineers reveals that generated repairs produce visually correct layouts while maintaining aesthetics.