Search code examples
reactjsgoogle-apps-scriptvite

React App Resizing Constantly When Deployed to Google Apps Script

I'm building a React app using the following tech stack:

  • Vite (frontend bundling)
  • Rollup (backend bundling)
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn (component library)

The app works perfectly in my local development environment. However, when I deploy it to Google Apps Script (GAS) as a web app, the page content starts resizing constantly across the site. This behavior causes the scrollbars to appear and disappear repeatedly, as shown in this short clip:

[Include link to video clip or upload GIF]

Details About the Environment:

  • Deployment: Hosted via Google Apps Script.
  • Behavior: Resizing and scrollbar flickering occur when loading any page, even with mock or live data.

Questions:

  1. Has anyone encountered a similar issue when deploying a React app to Google Apps Script?
  2. Are there any known limitations or best practices for deploying apps to GAS that might affect layout or iframe behavior?
  3. Could Tailwind, shadcn, or any specific library in my stack be conflicting with GAS's iframe handling?

I'm looking for any insights, solutions, or workarounds to prevent this constant resizing behavior when deployed to GAS. Thanks in advance for your help!

Solution

  • So I finally figured it out, I think but basically it came down to a styling problem in my code.

    I'm using react and I had done the following in my layout.tsx

    return (
    <SidebarProvider>
      {/* menu sidebar */}
      <AppSidebar />
      <div className="flex flex-col flex-1">
        {/* header */}
        <AppHeader />

        {/* main content */}
        <main className="flex-1">{children}</main>

        {/* footer */}
        <Footer />
      </div>
    </SidebarProvider>`

    For whatever reason, I'm not a css expert, but it looks like the flex-1 in the <main> was conflicting with the parent div. All is to say that the parent div was already manaing the container size and after removing className="flex-1" from <main> all was working and no more recurring resizing.