fix: some tui work in layout

apps/tui/src/ui.rs

@@ -419,14 +419,7 @@ fn render_large_otp(
     let inner_width = usize::from(area.width.saturating_sub(2));
     let mut lines = glyphs
         .iter()
-        .map(|row| {
-            Line::styled(
-                row.as_str(),
-                Style::default()
-                    .fg(Color::Green)
-                    .add_modifier(Modifier::BOLD),
-            )
-        })
+        .map(|row| large_otp_line(row))
         .collect::<Vec<_>>();
     lines.push(Line::styled(
         countdown_bar(remaining, period, inner_width),
@@ -444,6 +437,26 @@ fn render_large_otp(
     );
 }
 
+fn large_otp_line(row: &str) -> Line<'_> {
+    let digit_style = Style::default()
+        .fg(Color::Black)
+        .bg(Color::Green)
+        .add_modifier(Modifier::BOLD);
+    Line::from(
+        row.split(' ')
+            .enumerate()
+            .flat_map(|(index, digits)| {
+                [
+                    (index != 0).then(|| Span::raw(" ")),
+                    (!digits.is_empty()).then(|| Span::styled(digits, digit_style)),
+                ]
+                .into_iter()
+                .flatten()
+            })
+            .collect::<Vec<_>>(),
+    )
+}
+
 fn render_compact_otp(
     frame: &mut Frame,
     display: &crate::app::OtpDisplay,
@@ -1149,6 +1162,21 @@ mod tests {
         assert_eq!(layout_class(Rect::new(0, 0, 140, 20)), LayoutClass::Wide);
     }
 
+    #[test]
+    fn large_otp_inverts_only_the_digits_that_form_each_glyph() {
+        let line = large_otp_line("1  22");
+        assert_eq!(line.to_string(), "1  22");
+        for span in line.spans {
+            if span.content == " " {
+                assert_eq!(span.style, Style::default());
+            } else {
+                assert_eq!(span.style.fg, Some(Color::Black));
+                assert_eq!(span.style.bg, Some(Color::Green));
+                assert!(span.style.add_modifier.contains(Modifier::BOLD));
+            }
+        }
+    }
+
     #[test]
     fn color_capability_has_a_complete_monochrome_fallback() {
         assert_eq!(