Heading glitches in small resolutions

deivijt commented 3 years ago

first to thank you because Bumbag is the best UI library for React out there at the moment. It is wonderful !

Describe the bug at small resolutions the Heading component fails and styles are lost

To Reproduce

Install bumbag for nextjs
Inside the index page import the Heading component
Activate toggle device toolbar from the browser

Expected behavior The component should keep its style

Screenshots

Something curious in some ios devices the Heading component does work

My code:

// _document.js
import Document, { Head, Html, Main, NextScript } from "next/document";
import { extractCritical } from "bumbag-server";
import { InitializeColorMode } from "bumbag";
export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    const styles = extractCritical(initialProps.html);
    return {
      ...initialProps,
      styles: (
        <>
          {initialProps.styles}
          <style
            data-emotion-css={styles.ids.join(" ")}
            dangerouslySetInnerHTML={{ __html: styles.css }}
          />
        </>
      ),
    };
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          <InitializeColorMode />
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// _app.js
import NextApp from "next/app";
import { Provider as BumbagProvider } from "bumbag";
export default class App extends NextApp {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <BumbagProvider isSSR>
        <Component {...pageProps} />
      </BumbagProvider>
    );
  }
}

//Index
import { Box, Heading } from "bumbag";

const Home = () => {
  return (
    <Box>
      <Heading use="h1">Heading fails</Heading>
    </Box>
  );
};

export default Home;

Testing on my physical Redmi phone I noticed the Heading component also has problems

Thank you!

deivijt commented 3 years ago

can you replicate this please? @jxom

maxmorlocke commented 2 years ago

FWIW, I can replicate this also (see https://subscribe.flightpenguin.com)

jxom / bumbag-ui

Heading glitches in small resolutions #171