When AI Gets Stuck in a Loop: A CSS Nightmare and Lessons Learned

Ever had an AI model tell you "Now I see the problem!" for three days straight? Let me tell you about my recent adventure with Aura, my financial analysis app, and how a simple CSS centering issue turned into an unexpected lesson about AI limitations.
The Initial Problem
I needed to center content when a sidebar was expanded. Sounds simple, right?
The problematic initial code:
.chat-container.sidebar-expanded {
margin-left: 280px;
width: calc(100vw - 280px);
}
The AI's Descent into Complexity
Day after day, the model (Claude-3.5-Sonnet) kept suggesting increasingly complex solutions:
The AI's spiral into complexity:
const calculateSidebarOffset = () => {
const viewportWidth = window.innerWidth;
const sidebarWidth = 280px;
const contentMaxWidth = 800;
const availableSpace = viewportWidth - sidebarWidth;
const optimalPadding = Math.max(20, availableSpace * 0.05);
// This went on and on...
}
Every time I asked for help, the response was: "Ah, NOW I see the problem!" Spoiler alert: it didn't.
The Three-Day Battle
Day 1: Simple calculations
.content {
margin-left: calc((100vw - 280px - 800px) / 2);
}
Day 2: Complex JavaScript solutions
const centerContent = () => {
const sidebar = document.querySelector('.sidebar');
const content = document.querySelector('.content');
// Pages of calculations followed
}
Day 3: Desperate measures
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
recalculateEverything(); // Pure desperation
});
}, []);
The Breaking Point
Would you risk changing your AI model mid-project to solve something like this? The reality is that it couldn't center the content because it failed to properly calculate screen distances with an open sidebar. Even after:

• Providing full context
• Restarting CURSOR
• Waiting days

• Multiple approaches
  The "Solution"
  The AI finally suggested hiding the sidebar and sold it as a brilliant UX decision. Here's what actually worked:
  The actual working solution:
  .sidebar {
  position: fixed;
  width: 280px;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  }
  .content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  }
  .messages-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  }
  1 Technical Improvements Made
  New Overlay Interface
  ChatGPT/Gemini-style sidebar
  Mobile-first approach
  Finally centered content (after much suffering)
  2 Backend Enhancements
  Gemini 1.5 Flash integration
  Robust anti-cache system
  Better Excel/PDF handling
  3 UX Optimizations
  Intuitive suggestions
  Smooth animations
  Enhanced visual feedback
  Lessons Learned About AI in Development
  1 AI Loops Are Real
  Models can get stuck in solution patterns
  More complex ≠ better
  Sometimes you need to step back
  2 Trust Your Instincts
  If a solution feels too complex, it probably is
  AI can be convincing even when wrong
  Simple solutions often work better
  3 Model Limitations
  Great for general problems
  Can struggle with spatial/visual logic
  May overcomplicate simple tasks
  The Path Forward
  I'm keeping the app in beta while I:

• Gather more user feedback

• Perfect the core features

• Plan for pay-per-use model (no monthly subscriptions)
  Technical Stack and Tools

• React + TypeScript

• CSS Modules

• Gemini 1.5 API

• CURSOR (AI coding assistant)

• Cloud Run + Google Cloud Storage
  Key Takeaways

1. AI models can be incredibly helpful but have clear limitations
2. Don't let AI convince you that complex solutions are better
3. Trust your developer instincts
4. Sometimes the "wrong" solution (hiding the sidebar) leads to better UX What's Next

• More analysis models
• Additional file format support
• Premium features
• Developer API Would love to hear your experiences with AI in development. Have you ever been stuck in an AI loop? How did you handle it?

Check it out: https://aura.vertex-flow.com

webdev #ai #programming #debugging #ux