custom:button-card has a different size than a regular button in a grid

[raven pasture]

So I created a button panel that when I type in a code it shows a submit button and I can press that submit button and it'll clear the code entered (so it hides the submit button) and it will also navigate me to a subview with different controls on it. For some reason the custom:button-card has a different size than all the other buttons in the panel. It looks like there's no vertical padding to it or something, and the only thing giving it height is the "Submit" text. I've tried adding a one of those custom stylings for height or padding, but it wont scale to my phone or on my computer. How can I make the buttons have the exact same sizes? Please note, I only started using home assistant like yesterday, so I'm still learning.

Here's the YAML for the submit button

type: conditional
conditions:
  - condition: state
    entity: input_text.admin_access_code_input
    state: "1234"
card:
  show_name: true
  show_icon: false
  type: custom:button-card
  tap_action:
    action: navigate
    navigation_path: /lovelace/admin-panel
    multi-calls: |
      [[[
        hass.callService("input_text", "set_value", { entity_id: "input_text.admin_access_code_input", value: ""} );
      ]]]
  name: Submit
  styles:
    card:
  hold_action:
    action: none

if I tick the option for rendering as squares, it looks like this

the squares one is a bit big so I don't want it enabled, but you can see the custom button doesn't scale with the grid

or if anyone has a suggestion to be able to do the clearing of the code and the navigating a different way without using the custom button, it would be appreciated

for rn, just avoiding browser-mod until I truly need it

[raven pasture]

Ended up figuring it out by searching through the issues on the github for button-card.
Solution was to add aspect_ratio: 2/1 to the button-card

[flat jackal]

you just started yesterday and already using multi_calls. 👍
That's a feature not very well documented.
The only suggestion I can think of that might also work would be to use a template for the state of the card. Then, you wouldn't have wrap the card around in the condition card.

For example, I have this template for "brightness selector buttons." If the lights are close to a specified brightness, the card will "glow" yellow.

state:
  - operator: template
    value: |
      [[[ 
        return states[variables.var_entity_id].attributes.brightness <= Math.floor((variables.var_value + 5) * 2.55) &&
        states[variables.var_entity_id].attributes.brightness >= Math.floor((variables.var_value - 5) * 2.55) &&
        states[variables.var_entity_id].attributes.brightness != Math.floor((variables.var_value - 5) * 2.55) 
      ]]]
    styles:
      name:
        - color: yellow
      card:
        - box-shadow: inset 0px 0px 5px 1px yellow
        - border: 1px solid yellow

Another option: the custom:button-card supports actions that can be templated. So, perhaps, if the input_select value equals 1234 then the action will happen, otherwise, set it to none.