[BUG] Table representation is broken in `Data Fetching` guide

[alicanerdurmaz]

Describe the bug

The table representation within the relationship section of the data-fetching documentation looks broken.

Steps To Reproduce

1. Go to https://refine.dev/docs/guides-concepts/data-fetching/#relationships
2. Look at the table representation.

Expected behavior

Borders should be aligned.

Screenshot

[amirk85]

I believe it's already aligned, working fine for me @alicanerdurmaz

[AnasGrzor]

I believe it's already aligned, working fine for me @alicanerdurmaz

If you check out the docs you can see the borders are misaligned. In my vscode it also appeared fine but for some reason in the docs it's weird.

[amirk85]

@AnasGrzor not able to see the screenshot you attached. And also I don't see any misalignment in the doc as well

attaching a short clip

Screencast from 12-01-24 04:09:05 AM IST.webm

[AnasGrzor]

@amirk85 This is in chrome

[alicanerdurmaz]

Hello @AnasGrzor and @amirk85, thanks for helping Refine.

It's an interesting problem 🤔. I will investigate too.

[aliemir]

Hey everyone, thank you for your interests and effort in this issue! I've suspected that this is happening due to fallbacks provided in the font family definition. I've checked in my local to update the tailwind.config.js like this for the JetBrains Mono:

"jetBrains-mono": [
                    "JetBrains Mono",
-                   ...defaultTheme.fontFamily.mono,
+                   "monospace"
                ],

The issue resolved for me.

Can anyone check if the same solution works for them as well? If its resolved, we'll be happy to see a PR addressing this change 🙏

[AnasGrzor]

I did the change but it's still the same

[Conqxeror]

It is caused by font-family: Source Code Pro @aliemir @BatuhanW @alicanerdurmaz

With Font :

SS for issue.

Reason for issue.

Without Font

Issue Fix If:

After removal of: font-family: Source Code Pro :

[notnick2]

Is the issue resolved? If not, I'm excited to work on resolving it.

[alicanerdurmaz]

@notnick2 Thanks 🚀, I assigned the issue to you.

[CodeKage25]

Hi @alicanerdurmaz , has this issue been fixed already? If not, can I fix it?

[alicanerdurmaz]

@CodeKage25 Thanks, I assigned it to you.

[domlimm]

@alicanerdurmaz Hey Alican, may I have a go at this? A little occupied in the next 4 days. Will work on it roughly mid of next week or ASAP. If you're okay with it!

[BatuhanW]

Hey @domlimm let us know when you can work on this, let's assign to you.

[domlimm]

@BatuhanW Hey Bathuan! I did some digging last week and just for an hour before writing this.. Seems okay on VSCode (but I suppose that's not the case/what we're trying to fix). However, I checked on prod and it seems slightly off. I'm on macOS, checked on Chrome.

VSCode:

Chrome:

Safari:

On Windows Chrome (both locally and prod): Exactly what's shown in the opening of this issue.

I am actually struggling to find out the root cause. It's odd because it's a table in markdown.

[JamieBort]

There's a lot of hands working on this issue. If there is anything that I can do to help, please let me know. Otherwise I'll continue to look for another issue to work on. FWI worth, I am new to this repo.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.