Tooltips/Popovers in wrong position (NextJS 14.2.5 using TailwindCSS, Headless UI)

[robksawyer]

Summary

I'm experiencing some odd behavior in the tool tips and popovers in the IndexFilters. The tooltips are positioned below the button (with the arrow at the bottom instead of top) and when I activate sort functions, the sort popover is too low.

I'm using the following packages in my project:

"@headlessui/react": "^2.1.2",
"@headlessui/tailwindcss": "^0.2.1",
"@shopify/polaris": "^13.8.0",
"@shopify/polaris-icons": "^9.3.0",
"@shopify/polaris-tokens": "^9.3.0",
"@tremor/react": "^3.17.4",

react: ^18 => 18.3.1
react-dom: ^18 => 18.3.1

Expected behavior

I'm expecting the components to not appear broken or misaligned.

Actual behavior

Wrap animated gifs/videos in a details tag:

Summary of your gif(s)

Steps to reproduce

Link to sandbox
1.
2.
3.

Are you using React components?

Yes

Polaris version number

13.8.0

Browser

Chrome Version 126.0.6478.127 (Official Build) (arm64)

Device

Macbook Pro M1 Max

[robksawyer]

This was happening because I was trying to use the AppProvider a bit too late I think. Earlier I was just trying to use my PolarisLayout in component that I needed Polaris in (that's a no go). When I used it in a component that was called directly from my layout.ts things started to position properly. I also put it outside of something like this in my main layout.

// src/layouts/MainLayout.tsx
"use client";
import React from "react";
import Sidebar from "@/components/shared/sidebar/Sidebar";
import UserSettingsDrawer from "@/components/shared/drawer/UserSettingsDrawer";
import PolarisLayout from "@/layouts/PolarisLayout";

interface MainLayoutProps {
  children: React.ReactNode;
}

const MainLayout = ({ children }: MainLayoutProps) => {
  return (
    <>
      <Sidebar />
      <UserSettingsDrawer />
      <PolarisLayout>
        <main className="flex-grow bg-gray-100 relative flex overflow-x-hidden">
          <div className="flex-1">{children}</div>
        </main>
      </PolarisLayout>
    </>
  );
};

export default MainLayout;

// src/layouts/PolarisLayout.tsx
import React from "react";
import "@shopify/polaris/build/esm/styles.css";
import { AppProvider } from "@shopify/polaris";
import enTranslations from "@shopify/polaris/locales/en.json";

const PolarisLayout = ({ children }: { children: React.ReactNode }) => {
  return <AppProvider i18n={enTranslations}>{children}</AppProvider>;
};

export default PolarisLayout;

Looking fresh!