Fixup layout

Julia created 2 years ago

Change summary

crates/editor/src/editor.rs     | 19 ++++++++++++++++---
crates/theme/src/theme.rs       |  4 +++-
styles/src/style_tree/editor.ts |  4 +++-
3 files changed, 22 insertions(+), 5 deletions(-)

Detailed changes

crates/editor/src/editor.rs

@@ -1240,6 +1240,9 @@ impl CompletionsMenu {
                             )
                             .map(|task| task.detach());
                         })
+                        .constrained()
+                        .with_min_width(style.autocomplete.completion_min_width)
+                        .with_max_width(style.autocomplete.completion_max_width)
                         .into_any(),
                     );
                 }
@@ -1250,7 +1253,7 @@ impl CompletionsMenu {
         enum MultiLineDocumentation {}
 
         Flex::row()
-            .with_child(list)
+            .with_child(list.flex(1., false))
             .with_children({
                 let mat = &self.matches[selected_item];
                 let completions = self.completions.read();
@@ -1263,7 +1266,12 @@ impl CompletionsMenu {
                             .scrollable::<MultiLineDocumentation>(0, None, cx)
                             .with_child(
                                 Text::new(text.clone(), style.text.clone()).with_soft_wrap(true),
-                            ),
+                            )
+                            .contained()
+                            .with_style(style.autocomplete.alongside_docs_container)
+                            .constrained()
+                            .with_max_width(style.autocomplete.alongside_docs_max_width)
+                            .flex(1., false),
                     ),
 
                     Some(Documentation::MultiLineMarkdown(parsed)) => Some(
@@ -1271,7 +1279,12 @@ impl CompletionsMenu {
                             .scrollable::<MultiLineDocumentation>(0, None, cx)
                             .with_child(render_parsed_markdown::<MultiLineDocumentation>(
                                 parsed, &style, cx,
-                            )),
+                            ))
+                            .contained()
+                            .with_style(style.autocomplete.alongside_docs_container)
+                            .constrained()
+                            .with_max_width(style.autocomplete.alongside_docs_max_width)
+                            .flex(1., false),
                     ),
 
                     _ => None,

crates/theme/src/theme.rs

@@ -867,10 +867,12 @@ pub struct AutocompleteStyle {
     pub selected_item: ContainerStyle,
     pub hovered_item: ContainerStyle,
     pub match_highlight: HighlightStyle,
+    pub completion_min_width: f32,
+    pub completion_max_width: f32,
     pub inline_docs_container: ContainerStyle,
     pub inline_docs_color: Color,
     pub inline_docs_size_percent: f32,
-    pub alongside_docs_width: f32,
+    pub alongside_docs_max_width: f32,
     pub alongside_docs_container: ContainerStyle,
 }
 

styles/src/style_tree/editor.ts

@@ -206,10 +206,12 @@ export default function editor(): any {
                 match_highlight: foreground(theme.middle, "accent", "active"),
                 background: background(theme.middle, "active"),
             },
+            completion_min_width: 300,
+            completion_max_width: 700,
             inline_docs_container: { padding: { left: 40 } },
             inline_docs_color: text(theme.middle, "sans", "disabled", {}).color,
             inline_docs_size_percent: 0.75,
-            alongside_docs_width: 700,
+            alongside_docs_max_width: 700,
             alongside_docs_container: { padding: autocomplete_item.padding }
         },
         diagnostic_header: {