Heading glitches in small resolutions #171

deivijt · 2021-10-12T03:12:29Z

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!

The text was updated successfully, but these errors were encountered:

deivijt · 2021-10-21T22:07:02Z

can you replicate this please? @jxom

maxmorlocke · 2021-11-15T21:45:22Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Heading glitches in small resolutions #171

Heading glitches in small resolutions #171

deivijt commented Oct 12, 2021 •

edited

Loading

deivijt commented Oct 21, 2021

maxmorlocke commented Nov 15, 2021

Heading glitches in small resolutions #171

Heading glitches in small resolutions #171

Comments

deivijt commented Oct 12, 2021 • edited Loading

deivijt commented Oct 21, 2021

maxmorlocke commented Nov 15, 2021

deivijt commented Oct 12, 2021 •

edited

Loading