jxom / bumbag-ui

Build themeable React & React Native applications with your Bumbag 👝
https://bumbag.style
MIT License
1.01k stars 50 forks source link

Heading glitches in small resolutions #171

Open deivijt opened 3 years ago

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

  1. Install bumbag for nextjs

  2. Inside the index page import the Heading component

  3. Activate toggle device toolbar from the browser

Expected behavior The component should keep its style

Screenshots

Screen Shot 2021-10-11 at 10 02 53 PM Screen Shot 2021-10-11 at 10 07 04 PM

Something curious in some ios devices the Heading component does work

Screen Shot 2021-10-11 at 10 24 43 PM

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)