Theme · Importing: a long name gives way, four-digit colors read

A read theme's name is an Ellipsis that gives way beside its mode badge,
so a long name keeps the badge inside a 280px box. parse_hex reads #rgba
as VS Code does, each digit doubled, so a theme with a four-digit color
reads. Tests hold the badge inside the box and read #0008 as black at
0x88 alpha.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/settings/importer.rs

@@ -13,6 +13,7 @@ use crate::{
     forms::DropZone,
     primitives::Severity,
     theme::{ActiveTheme, Mode, TextSize},
+    typography::Ellipsis,
 };
 
 /// What the importer read last: a theme and the file it came from, or why the file did not read.
@@ -127,13 +128,22 @@ pub(super) fn read_row(
                         .gap_2()
                         .child(
                             div()
+                                .flex_1()
+                                .min_w_0()
                                 .font_weight(FontWeight::MEDIUM)
-                                .child(read.name.clone().map_or(file.clone(), SharedString::from)),
+                                .child(Ellipsis::new(
+                                    read.name.clone().map_or(file.clone(), SharedString::from),
+                                )),
                         )
-                        .child(Badge::new(match read.mode {
-                            Mode::Light => "Light",
-                            Mode::Dark => "Dark",
-                        })),
+                        .child(
+                            div()
+                                .flex_none()
+                                .debug_selector(|| "theme-import-mode".into())
+                                .child(Badge::new(match read.mode {
+                                    Mode::Light => "Light",
+                                    Mode::Dark => "Dark",
+                                })),
+                        ),
                 )
                 .child(
                     div()

src/settings/tests/theme.rs

@@ -211,3 +211,32 @@ fn a_code_sample_stays_inside_a_narrow_card(cx: &mut TestAppContext) {
         "{sample:?} inside {frame:?}"
     );
 }
+
+fn narrow_read_row(_: &mut Window, cx: &mut App, _: Entity<Desk>) -> AnyElement {
+    let read = read_vscode_theme(
+        r##"{"name": "GitHub Dark Default Colorblind Edition", "type": "dark", "colors": {}}"##,
+    )
+    .expect("a theme");
+    let apply: OnTheme = std::rc::Rc::new(|_, _, _| {});
+    gpui::div()
+        .debug_selector(|| "narrow".into())
+        .w(gpui::px(280.0))
+        .child(importer::read_row(
+            &read,
+            &"long.json".into(),
+            &"importer".into(),
+            apply,
+            cx,
+        ))
+        .into_any_element()
+}
+
+/// At 280px a long theme name gives way, and its mode badge stays inside the box.
+#[gpui::test]
+fn a_long_theme_name_gives_way_to_its_badge(cx: &mut TestAppContext) {
+    let (_, cx) = desk(narrow_read_row, cx);
+    settle(cx);
+    let frame = cx.debug_bounds("narrow").expect("the box");
+    let badge = cx.debug_bounds("theme-import-mode").expect("the badge");
+    assert!(badge.right() <= frame.right(), "{badge:?} inside {frame:?}");
+}

src/settings/vscode.rs

@@ -271,7 +271,7 @@ pub fn read_vscode_theme(text: &str) -> Result<VsCodeTheme> {
 
 #[cfg(test)]
 mod tests {
-    use gpui::rgb;
+    use gpui::{rgb, rgba};
 
     use super::{plain, read_vscode_theme};
     use crate::theme::{Mode, Palette};
@@ -311,6 +311,14 @@ mod tests {
         assert_eq!(mode("hc-light"), Mode::Light);
     }
 
+    #[test]
+    fn a_four_digit_color_reads_with_its_alpha() {
+        let theme =
+            read_vscode_theme(r##"{"type": "dark", "colors": {"widget.shadow": "#0008"}}"##)
+                .expect("a theme");
+        assert_eq!(theme.colors.shadow, rgba(0x00000088).into());
+    }
+
     #[test]
     fn a_terminal_color_reads_into_its_place() {
         let theme =