From cc07d4b6e370d5038df86f7d43d0b33c7a2b0f6f Mon Sep 17 00:00:00 2001
From: Julius Jurgelenas <julius@jurgelenas.lt>
Date: Fri, 18 Sep 2026 22:50:41 +0300
Subject: [PATCH 1/2] VTX Admin top bar UI change - make it look more like
 native edgetx value widget

---
 src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua b/src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua
index 58816ec..1b0c94c 100644
--- a/src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua
+++ b/src/WIDGETS/ELRSVTXAdmin/ui/topbar.lua
@@ -8,7 +8,11 @@ local VTXDisplay = ctx.VTXDisplay
 
 local TopBarUI = {}
 
---- Top bar: label over value, matching EdgeTX's stock status bar widgets.
+-- Same geometry as the stock Value widget in a top-bar zone: STD label at the
+-- origin, MIDSIZE value 14 px (scaled) below it, both left aligned.
+local VALUE_Y = math.floor(14 * lvgl.LCD_SCALE + 0.5)
+
+--- Top bar: label over value, matching EdgeTX's stock Value widget.
 function TopBarUI.build(w, h)
   lvgl.build({
     {
@@ -17,21 +21,20 @@ function TopBarUI.build(w, h)
       y = 0,
       w = w,
       h = h,
-      align = CENTER,
-      flexFlow = lvgl.FLOW_COLUMN,
-      flexPad = 0,
       children = {
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
+          x = 0,
+          y = 0,
+          font = STDSIZE,
           color = COLOR_THEME_PRIMARY2,
           text = "VTX",
         },
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
+          x = 0,
+          y = VALUE_Y,
+          font = MIDSIZE,
           color = COLOR_THEME_PRIMARY2,
           text = function()
             if VTXDisplay.showStatus() then

From dac4d2e02b473f474963e11c73a2b1887c77cb1a Mon Sep 17 00:00:00 2001
From: Julius Jurgelenas <julius@jurgelenas.lt>
Date: Fri, 18 Sep 2026 23:00:47 +0300
Subject: [PATCH 2/2] Update Telemetry widget to look similar to native value
 widgets when in top bar

---
 src/WIDGETS/ELRSTelemetry/ui/topbar.lua | 75 ++++++++++++++-----------
 1 file changed, 41 insertions(+), 34 deletions(-)

diff --git a/src/WIDGETS/ELRSTelemetry/ui/topbar.lua b/src/WIDGETS/ELRSTelemetry/ui/topbar.lua
index 52ad92f..bb2c6fd 100644
--- a/src/WIDGETS/ELRSTelemetry/ui/topbar.lua
+++ b/src/WIDGETS/ELRSTelemetry/ui/topbar.lua
@@ -3,10 +3,11 @@
 -- Loaded via loadScript() from each per-screen ui/ file with            --
 -- ({ Display }); returns the TopBarUI table.                            --
 --                                                                       --
--- Two stacked lines and no background, so it composes onto the dark     --
--- header. Everything it shows is abbreviated to fit a top-bar slot,     --
--- which is why it spells out its own text ladder rather than reusing    --
--- the hero label's.                                                     --
+-- Same geometry as the stock Value widget in a top-bar zone, so it      --
+-- lines up with one placed beside it: a STD row at the origin and a     --
+-- MIDSIZE row 14 px (scaled) below, both left aligned, no background.   --
+-- The small row carries the RSSI where a stock Value carries its source --
+-- name; the big row is the LQ.                                          --
 ---------------------------------------------------------------------------
 
 local ctx = ...
@@ -14,16 +15,39 @@ local Display = ctx.Display
 
 local TopBarUI = {}
 
+local VALUE_Y = math.floor(14 * lvgl.LCD_SCALE + 0.5)
+
 --- The top bar sits on the dark header, so it needs PRIMARY2 where
---- Display.heroColor uses PRIMARY1.
-local function mismatchColor()
+--- Display.heroColor uses PRIMARY1. Disconnected takes the disabled grey a
+--- stock Value gives stale telemetry.
+local function barColor()
+  if not Display.isConnected() then
+    return COLOR_THEME_DISABLED
+  end
   if Display.isMismatch() then
     return COLOR_THEME_WARNING
   end
   return COLOR_THEME_PRIMARY2
 end
 
---- Top bar: two lines stacked, no background.
+local function smallText()
+  if not Display.isConnected() then
+    return "--"
+  end
+  if Display.isMismatch() then
+    return "Mismatch"
+  end
+  return Display.rssiText()
+end
+
+local function bigText()
+  if not Display.isConnected() or Display.isMismatch() then
+    return "--"
+  end
+  return table.concat({ Display.lqHeroText(), "%" })
+end
+
+--- Top bar: RSSI over LQ, in the stock Value widget's label-over-value layout.
 function TopBarUI.build(w, h)
   lvgl.build({
     {
@@ -32,39 +56,22 @@ function TopBarUI.build(w, h)
       y = 0,
       w = w,
       h = h,
-      align = CENTER,
-      flexFlow = lvgl.FLOW_COLUMN,
-      flexPad = 0,
       children = {
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
-          color = mismatchColor,
-          text = function()
-            if not Display.isConnected() then
-              return "--"
-            end
-            if Display.isMismatch() then
-              return "Model"
-            end
-            return Display.lqText()
-          end,
+          x = 0,
+          y = 0,
+          font = STDSIZE,
+          color = barColor,
+          text = smallText,
         },
         {
           type = lvgl.LABEL,
-          align = CENTER,
-          font = SMLSIZE,
-          color = mismatchColor,
-          text = function()
-            if not Display.isConnected() then
-              return "--"
-            end
-            if Display.isMismatch() then
-              return "Mismatch"
-            end
-            return Display.rssiText()
-          end,
+          x = 0,
+          y = VALUE_Y,
+          font = MIDSIZE,
+          color = barColor,
+          text = bigText,
         },
       },
     },