Reponsive Design

[devilliersjohnny]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

While designing the dashboard to be responsive have come across a few bugs...

1. When the view area becomes less than 740px wide the lite and compact cards seem to cut off the last bit of the Daily load Reading
   

Whereas the full card doesn't

2. When the view area narrower towards the mobile end... there is a rather large gap between elements

Steps To Reproduce

1. Environment
   • Home assistant version - 2024.7.4
   • Web browser - FireFox using the responsive design ( ctrl + shift + m )

Expected behaviour

Would like to have the card displaying the entire reading not cutting some off, it appears that you have changed either the margin or padding between the full and other cards ( look towards the grid side )

Then would also like to see the top of the card stay in the same place when resizing... at this point it adds additional space as is shrinks

OH! P.S Thanks to you and all of your contributors, the card is brilliant otherwise!

Card Version

4.44

Home Assistant Version

2024.7.4

Configuration

No response

Relevant log output

No response

[slipx06]

Hi. What view type are you using for your dashboard? Can you share your config for:

panel_mode: 
card_height: 
card_width:

[devilliersjohnny]

All are default using a layout card with Grid (layout-card) selected and configured as following

gridrows: auto
grid-template-columns: 10% 20% 20% 20% 20% 10%
grid-template-areas: |
  "hl hm hm hm hm hr"
  "hl1 hm1 hm1 hm1 hm1 hr1"
  "lhl1 h1 h1 h1 h1 rhr1"
  "lm1 m1 m1 m1 m1 rm1"
  "lm2 m2 m2 m2 m2 rm2"
  "lm3 m3 m3 m3 m3 rm3"
  "lm4 m4 m4 m4 m4 rm4"
  "lm5 m5 m5 m5 m5 rm5"
  "lm6 m6 m6 m6 m6 rm6"
  "lm7 m7 m7 m7 m7 rm7"
  "lm8 m8 m8 m8 m8 rm8"
  "lm9 m9 m9 m9 m9 rm9"
mediaquery:
  "(max-width: 800px)":
    grid-template-columns: 50% 50%
    grid-template-areas: |
      "hm hm"
      "hm1 hm1"
      "h1 h1"
      "m1 m1"
      "m2 m2"
      "m3 m3"
      "m4 m4"
      "m5 m5"
      "m6 m6"
      "m7 m7"
      "m8 m8"
      "m9 m9"

The card is placed in m1 as seen below

type: custom:sunsynk-power-flow-card
visibility:
  - condition: numeric_state
    entity: input_number.edb_inverter_count
    above: 0
cardstyle: compact
show_battery: true
show_solar: true
show_grid: true
decimal_places: 2
decimal_places_energy: 2
inverter:
  three_phase: false
  auto_scale: false
  modern: true
  model: victron
  autarky: power
battery:
  energy: sensor.edb_i1_battery_usable_capacity
  show_daily: true
  shutdown_soc: sensor.edb_i1_battery_shutdown_soc
  auto_scale: false
  invert_power: true
  show_absolute: false
  dynamic_colour: true
  linear_gradient: false
  animate: true
  hide_soc: false
  show_remaining_energy: true
solar:
  display_mode: 2
  show_daily: true
  mppts: 2
  auto_scale: false
  dynamic_colour: true
  pv2_max_power: sensor.edb_i1_mppt2_max_power
  pv3_max_power: sensor.edb_i1_mppt3_max_power
  pv4_max_power: sensor.edb_i1_mppt4_max_power
  pv1_max_power: sensor.edb_i1_mppt1_max_power
  max_power: sensor.edb_i1_mppt_power_max
grid:
  show_daily_buy: true
  show_daily_sell: false
  show_nonessential: true
  auto_scale: false
  invert_grid: false
  show_absolute: false
  no_grid_colour: green
  grid_off_colour: red
load:
  show_daily: true
  auto_scale: false
  dynamic_colour: true
  dynamic_icon: true
  invert_load: false
entities:
  dc_transformer_temp_90: sensor.edb_i1_temp_dc_transformer
  radiator_temp_91: sensor.edb_i1_temp_radiator
  inverter_voltage_154: sensor.edb_i1_inverter_l1_voltage_out
  inverter_current_164: sensor.edb_i1_inverter_l1_current_out
  inverter_power_175: sensor.edb_i1_inverter_l1_power_out
  inverter_voltage_L2: sensor.edb_i1_inverter_l2_voltage_out
  inverter_voltage_L3: sensor.edb_i1_inverter_l3_voltage_out
  inverter_current_L2: sensor.edb_i1_inverter_l2_current_out
  inverter_current_L3: sensor.edb_i1_inverter_l3_current_out
  inverter_status_59: sensor.edb_i1_alarm_status
  day_battery_charge_70: sensor.edb_i1_battery_energy_in_daily_utility_meter
  day_battery_discharge_71: sensor.edb_i1_battery_energy_out_daily_utility_meter
  battery_voltage_183: sensor.edb_i1_battery_voltage
  battery_soc_184: sensor.edb_i1_battery_soc
  battery_power_190: sensor.edb_i1_battery_power
  battery_current_191: sensor.edb_i1_battery_current
  battery_soh: sensor.edb_i1_battery_soh
  battery_temp_182: sensor.edb_i1_battery_temperature
  day_pv_energy_108: sensor.edb_i1_mppt_total_energy_out_daily
  pv1_power_186: sensor.edb_i1_mppt1_power
  pv2_power_187: sensor.edb_i1_mppt2_power
  pv3_power_188: sensor.edb_i1_mppt3_power
  pv4_power_189: sensor.edb_i1_mppt4_power
  pv_total: sensor.edb_i1_mppt_power_total
  remaining_solar: sensor.energy_production_today_remaining
  pv1_voltage_109: sensor.edb_i1_mppt1_voltage
  pv1_current_110: sensor.edb_i1_mppt1_current
  pv2_voltage_111: sensor.edb_i1_mppt2_voltage
  pv2_current_112: sensor.edb_i1_mppt2_current
  pv3_voltage_113: sensor.edb_i1_mppt3_voltage
  pv3_current_114: sensor.edb_i1_mppt3_current
  pv4_voltage_115: sensor.edb_i1_mppt4_voltage
  pv4_current_116: sensor.edb_i1_mppt4_current
  grid_power_169: sensor.edb_i1_grid_l1_power
  day_grid_import_76: sensor.edb_i1_grid_l1_energy_in_daily_utility_meter
  day_grid_export_77: sensor.edb_i1_grid_l1_energy_out_daily_utility_meter
  grid_ct_power_172: sensor.edb_i1_grid_l1_power
  grid_ct_power_L2: sensor.edb_i1_grid_l2_power
  grid_ct_power_L3: sensor.edb_i1_grid_l3_power
  grid_connected_status_194: sensor.edb_i1_grid_connected_sensor
  prepaid_units: sensor.prepaid_units_left
  day_load_energy_84: sensor.edb_i1_load_l1_energy_daily_utility_meter
  nonessential_power: none
  load_frequency_192: sensor.edb_i1_inverter_l1_frequency_out
  load_power_L1: sensor.edb_i1_load_l1_power
  essential_load1: sensor.edb_i1_load_l1_power
  essential_power: sensor.edb_i1_load_l1_power
panel_mode: false
view_layout:
  grid-area: m1
card_mod:
  style: |
    ha-card { 
      --ha-card-background: transparent;
      border-style: none;
    }

[slipx06]

The card is rendered as an SVG element with set viewbox. The lite and compact cards are actually slightly bigger than the full card and that is why it is cutting it off as its trying to preserve aspect ration given the available grid space. You can adjust the card height to make it fit better. In hindsight the dimensions should have been standardized but it just evolved this way as I was figuring things out.

[devilliersjohnny]

Thanks for looking into it... think that I may have a solution for the first problem, the full card has a smaller margin on the left than the other two, would it help if you set your viewbox's offset? Have only just managed to get the dev containers running on my pc so still have a ways to go before I can do anything about it.