Beautiful Design App

Little code to help “filling” a button when being hovered.


[data-test="app-button-view"] {
background-color: transparent !important;
border: 1px solid transparent !important;
margin: 10px 90px;
color: #006570 !important;
border-color: #006570 !important;

[data-test="app-button-view"]:hover {
color: #fff !important;
background-color: #006570 !important;
border-color: #006570 !important;

A code to help with horizontal visibility issues.


Hi! How are you? Seeing your design is great. I see that you use the app icon in the main bar and you have the search bar activated. I wanted to know if for Android the search button does not move or is it hidden?

I am using a code but in the Android view it generates that problem for me when I activate the search bar button.

If it works well for you, could you share the code with me?

@Lucas_Pires @Manu.n

1 Like

Had a use case for this today. Any chance we can figure out how to prevent return characters in the input or at least, if a user types a return character, it still displays inline (like a caption in an inline list)?


Hello @Robert_Petitto
What can I do for you ?


Is there a way using CSS to keep all input text on the same line even if a user types a return character? Targeting the text-input component.

I think about it.


But give me a few minutes to do a test. Unless you are (as usual ;-)) faster than me

In my experience, any code you use, when you click on the search bar - Android or iOS - disables any code you have in the screen

I tried the nowrap but it didn’t work.

me neither.
I am not very successful. But I continue my research

1 Like

Is this finished? looks out of the world… damn

1 Like

Seems like there’s some additional work under the hood to keep it on the same line, let’s say for the hint text’s header there is one but I can’t find it in the CSS. I think it’s a HTML conversion from a return character to a space.

I have found some time to do some testing and research, but I don’t have a solution for this problem. Sorry :frowning:


Releasing some of the Notion CSS me and @Lucas_Pires have been working on for the past few weeks.

Firstly we have this “floating” back and edit button, which goes in handy with screens where you have an image going straight to the top.

Displaying comments in a card view.


Circles for choices: This one has been a thing I want to do for a really long time. It takes some columns to get there, and the setup is not very easy, but it does the job.

Display quotes in card.


Padding for screens, a great-looking one from @Lucas_Pires.

Border for entry fields, with support for text, phone and email, credits to @Robert_Petitto.


choices are not working correctly… once picked text disappear (probably becoming a background color) and is not displaying more than 4

In the link I specified in the second part how to avoid that.

For screenshots you see with 2 lines, it’s two choice components. There’s no way to render more than 5 in a row, that’s the component’s limitation.

1 Like

i did that… no effect

I’m pretty sure it works here for me and I have applied that to multiple screens so if you want me to debug that please share a copyable app.