Table row height

[BlazerYoo]

🐞 bug report

✍️ Description

The last couple rows in the table here https://responsively.byoo.repl.co/ are thinner in Responsively than on actual display even though the custom device on Responsively has the same specifications as the actual display. See 🔥 Exception or Error or Screenshot for screenshots.

🕵🏼‍♂️ Is this a regression?

I am not sure if this worked in the previous version.

🔬 Minimal Reproduction

Link to website source: https://github.com/BlazerYoo/responsively

🌍 Your Environment

PC

🔥 Exception or Error or Screenshot

Link: https://responsively.byoo.repl.co/

Last seven table rows in reponsively

Last seven table rows on actual display

[open-collective-bot]

Hey @BlazerYoo 👋,

Thank you for opening an issue. We will get back to you as soon as we can. Have you seen our Open Collective page? Please consider contributing financially to our project. This will help us involve more contributors and get to issues like yours faster.

https://opencollective.com/responsively

We offer priority support for all financial contributors. Don't forget to add priority label once you become one! 😄

[jjavierdguezas]

Hi @BlazerYoo, thanks for report this
I can confirm that this is happening

[GoonerBrian]

I was going to look into this but I can't run the app locally using the yarn dev command that is giving in README.md -> Contribute. I see in Slack that I'm not the only one to have this issue but the question wasn't addressed in Slack. This would be my first contribution and any help would be appreciated.

[danielm2402]

Hello, I was checking and found that if you are in mode: "Enable Design Mode" this is solved. I do not understand very well what this option does, could you tell me what its functionality is? If they tell me this they can assign me the ticket. Thanks!

[jjavierdguezas]

@danielm2402 I can confirm that something changes when Design Mode is activated, but it is not solved for all devices (See the laptop devices on the screenshots below)

before Design Mode is activated:

after Design Mode is activated:

The design mode allows you to make temporary edits to the page. (see https://developer.mozilla.org/en-US/docs/Web/API/Document/designMode)

[crocarneiro]

It's definitely weird and I can't seem to figure the reason out.

I was digging into this issue and found some things interesting though.

The comments below are about the page used to test (https://responsively.byoo.repl.co/)

First, it only looks weird because the height of the td component is relative.

The computed value in the first rows is (kinda) correct:

In my case, the table’s height is 950px, so 950x0.0476=45.22 + 4=49.22. Rounding it up it should be 50px, so it does not make sense. However, in the last looking okay cell the computed height is indeed 50px.

As for the squished cells, their computed height is 2px.

But okay, let’s say we use 50px for the height instead of 4.76%. Like the image below:

Doing this, the table is correctly rendered:

Actually, even if we remove the height property altogether, it renders correctly.

So, with all of this said, it would be okay to think that the problem is the percentage unit right? Actually, no. “What if I use 4% instead of 4.76%”, I thought. Result? Renders correctly. Doing more changes I figured that it renders correctly with percentage as long as it does not have any decimals.

But why good Lord? Is it something wrong with the chrome version we are using maybe?

I tried to update the electron version to the latest but I could not get the application running. I guess it is not that simple.

I’ll try to look a little bit more into it, but if someone has any leads I would appreciate it.

[jjavierdguezas]

https://stackoverflow.com/q/4308989

[crocarneiro]

Thanks!

Actually, I had seen this one. Not sure if I missed something on it, but It seems like they are talking about a 1 pixel difference (up or down because of the rounding). So I could not reach any conclusion about:

• Why 4.76% of 950 turns into 2px
• Why only the last rows
• Why only on Responsively
• How to fix

Seems like I'll need to give it a little more thought.

[SaunakNandi]

@crocarneiro this link is not working now https://replit.com/replid/fdcf5459-7381-49c7-9ad4-020b61414296 why?

[BlazerYoo]

It should be accessible here now: https://blazeryoo.github.io/responsively/

Checking on Responsively version 1.15.0, I don't see the same issue anymore...