<div className="bg-white shadow-ContentShadow w-full h-threeline flex">
      <div
        className={`three-line w-LeftBarWidth icon flex justify-center items-center ease-out duration-300 ${
          leftBarState === true ? "opacity-0" : "opacity-100"
        }`}
      >
        <div
          className="icon cursor-pointer hover:scale-110 active:scale-100"
          onClick={() => setLeftBarState(true)}
        >
          <ThreeLineSVG />
        </div>
      </div>
      <div className="wheelify-logo flex-1 flex justify-center items-center">
        <div className="h-WheelifyLogoHeight hover:scale-110 cursor-pointer active:scale-100">
          <WheelifyLogo />
        </div>
      </div>
      <div className={"buttons flex justify-center items-center gap-3"}>
        <div className="w-navBarIcon h-navBarIcon rounded-full bg-white shadow-ContentShadow cursor-pointer active:scale-90">
          <NotificationLogo />
        </div>
        <div className="w-navBarIcon h-navBarIcon rounded-full bg-white shadow-ContentShadow cursor-pointer active:scale-90">
          <ProfileLogo />
        </div>
      </div>
    </div>

image differences of both clients

w-navBarIcon is just w-26% which is being applied to both browsers. however the container the holds the buttons

<div className={"buttons flex justify-center items-center gap-3"}>

is sizing differently in terms of width. on chrome in the computed inspect tab its computed width and height correctly. but in firefox in the computed it doesnt even show a width or height computation. that could be the source of the issue but its my first time on firefox so im not sure.