Trmnl Plugin

trunk.jsx

<div class="view view--full">
                <div class="layout layout--col gap--distribute h--full">
                     
                     <!-- Live Stats Header -->
                     <!-- Changed gap--distribute to gap--medium and added justify--center to group them better -->
                     <div class="flex flex--row flex--center-y flex--center-x flex--stretch-x gap--xxlarge">
                         ${ctx.todayGrid !== undefined ? `
                         <div class="flex flex--row flex--center-y gap--small">
                             <span class="title title--xxlarge">${(ctx.todayGrid).toFixed(1)}</span>
                             ${GRID_ICON_ALMOST_LARGE}
                         </div>
                         ` : ''}

                         ${ctx.todaySolar !== undefined ? `
                         <div class="flex flex--row flex--center-y gap--small">
                             <span class="title title--xxlarge">${(ctx.todaySolar).toFixed(1)}</span>
                             ${SUN_ICON_ALMOST_LARGE}
                         </div>
                         ` : ''}

                         <div class="flex flex--col">
                             ${this.renderBatteryStatusLarge(ctx.batterySoc, ctx.batteryStatus)}
                         </div>
                     </div>

                     <!-- Tariff Tables -->
                     <div class="flex flex--col w--full m--8 p--8">
                        ${tariffTables}
                     </div>

                     <!-- Footer -->
                     <div class="flex flex--row flex--center-x flex--center-y gap--medium">
                         <span class="title title--small">${ctx.siteName}</span>
                         <span class="label label--small">${ctx.dateRange}</span>
                     </div>
                </div>
            </div>

Updated to use trunk framework and remove nested layouts. Working better now.