Hi @LE0N . Thanks for your help!
This is my code regarding the themes.yaml file: homeassistant/rounded.yaml at main Ā· CM000n/homeassistant Ā· GitHub
I am curious to your entire dashboard now 
would you be able to share some screenshots?
Ah I see whatās causing it. Add this line of code to your card-mod-root-yaml addressing the #view div:
height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
So:
card-mod-root-yaml: |
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
}
OTHER CODE HERE...
Please let me know if this fixed your issue. Will also update my previous posts so everything is up-to-date.
Great dashboard @mjinx27! Any chance sharing your code? Iāve love to know how you did your Now Playing Apple TV card.
Gladly, made it on the fly, so not well thought out yet, you need mini-graph in addition and mushroom as well unfortunately.
1 Like
Unfortunately, there is no change for me yet.
Hi @LE0N ,
your work is HUGE and very beautiful!
iāve adapted your ālights cardsā to my covers/shutter, additionally to name/icon/slider iād like to add cover position status and buttons (up/stop/down): do you think is possible?
iām quite new with all and custom button card is not so simple for me.
thanks in advance
1 Like
Based on the energy cost buttons that @mjinx27 has in his tablet view. I have created the following:
type: grid
columns: 2
square: false
cards:
- type: custom:button-card
color_type: label-card
layout: label
show_name: false
show_state: false
show_units: false
show_label: true
show_icon: true
entity: sensor.james_energy_cost_daily
icon: fas:bolt
label: |
[[[
return 'Today Ā£' + states['sensor.james_energy_cost_daily'].state ;
]]]
aspect_ratio: 3/1
tap_action:
action: none
hold_action:
action: none
styles:
icon:
- width: 9px
- top: 0%
img_cell:
- justify-content: flex-end
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-width min-width
- height: 20px
card:
- background-color: var(--yellow)
- padding: 20px
label:
- font-size: 14px
- margin-left: 5%
- justify-self: flex-start
- type: custom:button-card
color_type: label-card
layout: label
show_name: false
show_state: false
show_units: false
show_label: true
show_icon: true
icon: fas:plug
entity: sensor.james_power_usage
label: |
[[[
return 'Currently ' + states['sensor.james_power_usage'].state + 'W';
]]]
aspect_ratio: 3/1
tap_action:
action: none
hold_action:
action: none
styles:
icon:
- width: 9px
- top: '-10%'
img_cell:
- justify-content: flex-end
grid:
- grid-template-areas: '"i l"'
- grid-template-columns: min-width min-width
- height: 20px
card:
- background-color: var(--red)
- padding: 20px
label:
- font-size: 14px
- margin-left: 5%
- justify-self: flex-start
Hope its of use to someone! 
12 Likes
Hi, after update to 2023.5.1 if I use ābottom tabbarā there is back an empty space in the place where top navbar was located. And ābottom tabbarā overlaps part of cards on the bottom of my view.
With 2023.4 it was fine the issue emerged after update to 2023.5.
This is config functional before update:
card-mod-root-yaml: |
ha-tabs$: |
#tabsContainer {
display: flex;
justify-content: center;
}
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
}
.header {
top: auto !important;
bottom: 0 !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
/* This hides the help button, menu button and title */
a.menu-link[target="_blank"], ha-button-menu, [main-title] {
display: none !important;
}
ha-menu-button, ha-icon-button {
display: none !important;
}
ha-tabs: {
height: var(--header-height);
--paper-tabs-selection-bar-color: var(--button-card-background-color-on) !important;
color: var(--app-header-text-color) !important;
}
paper-tab[aria-selected=true] > ha-icon, paper-tab[aria-selected=true] {
color: var(--button-card-background-color-on) !important;
}
/* Color selected tabs */
paper-tab[aria-selected="true"] > ha-icon {
color: var(--primary-color) !important;
}
Any idea how to solve it?
1 Like
what happened if your try this in the theme rounded.yaml
masonry-view-card-margin: 0px 20px
dont forget to reload the theme through dev tools
A little bit better on some views, but empty space on the top is still there.
Edit:
It changed gaps between cards so my views look weird. It means masonry-view-card-margin: 0px 20px does not solve this case 
I have also noticed some changes since 2023.5. The bottom bar is now transparent again, but not blurred. In addition, the bottom bar feels higher and the distance between the page content and the top feels increased. 
try adding padding-top to #view section in your theme yaml
#view {
margin-top: 0px !important;
padding-top: 0px !important;
}
1 Like
Yes !!! It is it. 
Thank you
As usual - I did not see it
1 Like
I have the same problem like @CM000n. The bottom bar is much higher and covers even the āadd cardā button. The solution provided by @schmierlappe unfortunately doesnāt work for this problem.
Any suggestions to solve this issue would be highly appreciated!
I have fixed it again for myself. The bottom bar now has an acceptable size again and is blurred
homeassistant/rounded.yaml at main Ā· CM000n/homeassistant Ā· GitHub
7 Likes
HI! Thanks for your code, it works perfectly!
I would like to ask you for a little help, on my theme I put the minimalist theme navbar.
However, I would like to put the blur effect there too, but Iām not capable of it ā¦ could you help me?
card-mod-root-yaml: |
ha-tabs$: |
#tabsContent {
width: 97%;
}
.: |
/* ___________ Bottom tabbar ___________ */
div#view{
transform: initial;
padding: 0 !important;
position: fixed !important;
margin: 0 !important;
width: 100%;
}
.header {
top: auto !important;
bottom: 0px !important;
transform: translate3d(0px, 0px, 0px) !important;
backdrop-filter: blur(50px) !important;
-webkit-backdrop-filter: blur(50px) !important;
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: var(--header-base-height) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
background-color: rgba(0,0,0,0) !important;
}
#view {
margin-top: calc(-1 * var(--header-height)) !important;
padding-bottom: var(--header-height);
}
ha-tabs {
--paper-tabs-selection-bar-color: var(--header-tab-indicator-color);
--mdc-icon-size: 26px;
display: flex;
justify-content: space-between;
padding: 0 10px;
height:50px !important;
}
paper-tab[aria-selected=true] {
color: var(--header-active-tab-color);
background-color: var(--header-active-tab-bg-color);
}
paper-tab {
color: var(--header-all-tabs-color);
border-radius: 25px;
height:50px;
/*width: calc(100% / 4);
padding: 0;*/
padding-left: 20px;
padding-right: 20px;
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
Hi, apologies for the late reply, only just seen this Will clean up my code and upload to Github soon
4 Likes