Why are developers using right/left etc css properties in 2024???

[babakfp]

look at that gap between placeholder and search icon.

[babakfp]

Another issue: Clicking on the search icon doesn't do anything, you should click on the placeholder.

[babakfp]

bad ux with x and +

[babakfp]

Why gravatar is the default!

[akhrarovsaid]

Hey @babakfp,

I hear you - it seems that the padding there is a little too much. For now, a workaround that you may find suitable for your issues is utilizing the custom.css file located in the (payload) folder to substitute your own styling into Payload Admin.

For example for the Search bar:

[dir=rtl] .search-filter__input {
    padding-left: 0px;
    padding-right: <desirable-padding-here>;
}

Every style that exists in Payload can be overwritten using the custom.css file. Super useful for situations where you think UX can be improved for your users without having to reconfigure views. Hope this helps.

As for Gravatar, I agree, it shouldn't be default. However, this is easily changed via config. See avatar buildConfig option here on how to change this.

[babakfp]

Hey.
Thank you for your comment.
Yes, I can it them by myself. My issue is, they could have done less work and as a result have a product without RTL issues.
Yes, I changed gravatar from config...
Cool, thanks again.

[babakfp]

I'm just going to throw in here things that I don't like...

---

UX issue: If I'm in /admin/account page, howering over profile icon should not change the mouse cursor to pinter.

---

I may be wrong but, wheren't they working on a new UI? I may have seen a comment somewhere related to this...

---

My other issue with payload is nextjs. I have darkreader extension enabled and first thing that I see running payload is a hydration error. I don't understand how no framework has this issue other than nextjs.

---

Other issue: I used the blank template and it's showing me a .scss file. I don't like it. show me tailwindcss. No one in 2024 should use scss. It's awfully limited in what it can do with an awful syntax.

---

Another thing: I don't know what's the deal with this file. I delete it and it shows up again (with the white lines :|)...

---

UX issue: They are collapsing the sidebar to soon. I zoom a little and the sidebar closes. I have planty of room...

---

Padding/container?

---

Rounded and sharp?

---

I don't need to see this every single time on the top of every collection. Super annoying and unnecessary.

---

I "love" it (not really), mandatory accessibility (alt text).

Edit: I just realized this in code :)

{
  name: 'alt',
  type: 'text',
  required: true,
},

[babakfp]

What is up with Nextjs and this stupid errors!!! I've seen no framework out there complain about my browser extensions. How can I prevent this once for all?

Console Error

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


-data-darkreader-proxy-injected="true"
Call Stack
<unknown>
https://react.dev/link/hydration-mismatch
handleClientError
..\src\client\components\react-dev-overlay\internal\helpers\use-error-handler.ts (25:13)
error
..\src\client\components\globals\intercept-console-error.ts (19:27)

[tyteen4a03]

From the very same error you quoted:

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

Disable the extension and your problem is gone.

[babakfp]

I don't want to disable/enable the extensions every time I open a nextjs project. How are people using nextjs with such a big issue? I tried adding suppressHydrationWarning but didn't help.

[tyteen4a03]

I tried adding suppressHydrationWarning but didn't help.

suppressHydrationWarning only works on the current level; children elements need their own suppressHydrationWarnings.

How are people using nextjs with such a big issue?

Is it big? I don't know. I just click it away. It doesn't happen on production. Anyway you can follow facebook/react#24430 for a proper fix from React.

[babakfp]

Isn't remix made with React? I'm not getting the same error inside a remix starter template, only nextjs apps.

[tyteen4a03]

Isn't remix made with React? I'm not getting the same error inside a remix starter template, only nextjs apps.

It's specifically a RSC problem. Remix currently does not implement RSC.

[babakfp]

In docs page https://payloadcms.com/docs/fields/code, I scroll down on the left sidebar, click on a link and after navigation, scroll position of the sidebar resets. Super awful UX.