feature: make it possible to set footer height

README.md

@@ -119,6 +119,7 @@ sections: # see explanation further up
 startSection: queue # default is player. Use this to set the default section to show. 
 widthPercentage: 75 # default is 100. Use this to change the width of the card.
 heightPercentage: 75 # default is 100. Use this to change the height of the card. Set to 'auto' to make the card height adjust to the content.
+footerHeight: 4 # default is 5. Unit is 'rem'. Use this to change the height of the footer.
 entityId: media_player.bedroom # Forces this player to be the selected one on loading the card (overrides url param etc)
 entityNameRegexToReplace: ' PLAYER' # Regex pattern to replace parts of the entity names
 entityNameReplacement: ''

src/card.ts

@@ -30,7 +30,8 @@ export class Card extends LitElement {
     let height = getHeight(this.config);
     const sections = this.config.sections;
     const showFooter = !sections || sections.length > 1;
-    const contentHeight = showFooter ? height - FOOTER_HEIGHT : height;
+    const footerHeight = this.config.footerHeight || FOOTER_HEIGHT;
+    const contentHeight = showFooter ? height - footerHeight : height;
     const title = this.config.title;
     height = title ? height + TITLE_HEIGHT : height;
     return html`
@@ -84,7 +85,7 @@ export class Card extends LitElement {
           showFooter,
           () =>
             html`<sonos-footer
-              style=${this.footerStyle()}
+              style=${this.footerStyle(footerHeight)}
               .config=${this.config}
               .section=${this.section}
               @show-section=${this.showSectionListener}
@@ -183,9 +184,9 @@ export class Card extends LitElement {
     });
   }
 
-  footerStyle() {
+  footerStyle(height: number) {
     return styleMap({
-      height: `${FOOTER_HEIGHT}rem`,
+      height: `${height}rem`,
       padding: '0 1rem',
     });
   }

src/components/footer.ts

@@ -41,7 +41,7 @@ class Footer extends LitElement {
         justify-content: space-between;
       }
       :host > * {
-        padding: 1rem 0;
+        align-content: center;
       }
     `;
   }

src/editor/advanced-editor.ts

@@ -148,6 +148,11 @@ export const ADVANCED_SCHEMA = [
     type: 'string',
     name: 'mediaTitleReplacement',
   },
+  {
+    name: 'footerHeight',
+    type: 'integer',
+    valueMin: 0,
+  },
 ];
 
 class AdvancedEditor extends BaseEditor {

src/types.ts

@@ -95,6 +95,7 @@ export interface CardConfig extends LovelaceCardConfig {
   fastForwardAndRewindStepSizeSeconds?: number;
   groupingButtonIcons?: GroupingButtonIcons;
   sectionButtonIcons?: SectionButtonIcons;
+  footerHeight?: number;
 }
 
 export interface MediaArtworkOverride {