t1mp4 Posts - Answer Overflow

t1mp4

Explore posts from servers

KPCKevin Powell - Community TTCTheo's Typesafe Cult

•Created by t1mp4 on 6/20/2024 in #front-end

Weird layout shift with max-width

I have this dead simple code: https://codepen.io/t1mp4/pen/abrYzpN Why does the horizontal position of the body change when I replace the image with text? The shift is subtle but noticeable and weird. I have only tried it in Brave Browser (Chromium-based) and Firefox. For some reason, the layout doesn't change in Firefox, only in Brave. When I change the image height to some other value, say 100px, the layout shift is gone for some reason. I'm confused.

4 replies

TTCTheo's Typesafe Cult

•Created by t1mp4 on 3/6/2024 in #questions

Prevent parallel route from being triggered if hard-navigated

https://codesandbox.io/p/devbox/login-register-parallel-example-zw9m7m TL;DR: Try hard-navigating to either "/auth/login" or "/auth/register" and then click on one of the 4 links on the page. It triggers the parallel route. I don't want that. Does anyone know how I can prevent the modal (a.k.a. the parallel route) from being triggered whenever I hard-navigate to either "/auth/login" or "/auth/register" and then click on either the 2 links in the header or the 2 links that are part of the auth layout (those are tabs that lets you quickly tab between the login-form and the register-form)? From my understanding, this behavior is 100% expected, but I feel like there must be some way to prevent it from happening. I've played around with route grouping, useSelectedLayoutSegment, etc, but just can't figure it out.

3 replies

KPCKevin Powell - Community

•Created by t1mp4 on 10/18/2023 in #front-end

Make div "behave" like body element

Considering this simple HTML:

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

<html>
    <head>
        <title>My website</title>
    </head>
    <body>
        <div id="app-root"></div>
    </body>
</html>

What is the best way to make the #app-root div "behave" like the <body> element? For example, if I set background-color: red; on the <body> element, the page obviously becomes red. But if I do the same to #app-root nothing happens (obviously) because there's no content inside of it. But I want #app-root to behave like the <body> element.

28 replies

Gaming

Programming