better form

src/client/components/form.rs

@@ -1,9 +1,9 @@
 // src/client/components/form.rs
 use ratatui::{
-    widgets::{Paragraph, Block, Borders},
+    widgets::Paragraph,
     layout::{Layout, Constraint, Direction, Rect},
     style::Style,
-    text::Line,
+    text::{Line, Span},
     Frame,
 };
 use crate::client::colors::Theme;
@@ -16,44 +16,35 @@ pub fn render_form(
     inputs: &[&String],
     theme: &Theme,
 ) {
+    // Split the area into a single column layout
     let form_chunks = Layout::default()
         .direction(Direction::Vertical)
-        .constraints(vec![Constraint::Length(3); 8])
+        .constraints(vec![Constraint::Length(1); fields.len()]) // Each field takes 1 row
-        .margin(1)
         .split(area);
 
-    let form_blocks = form_chunks.iter().enumerate().map(|(_i, chunk)| {
-        let chunks = Layout::default()
-            .direction(Direction::Horizontal)
-            .constraints([Constraint::Percentage(50), Constraint::Percentage(50)])
-            .split(*chunk);
-
-        vec![chunks[0], chunks[1]]
-    }).flatten().collect::<Vec<Rect>>();
-
     for (i, field) in fields.iter().enumerate() {
         let input = inputs[i].clone();
         let is_active = i == *current_field;
 
-        // Add this block construction
+        // Split each row into two parts: label and input
-        let block = Block::default()
+        let row_chunks = Layout::default()
-            .borders(Borders::ALL)
+            .direction(Direction::Horizontal)
-            .border_style(Style::default().fg(if is_active {
+            .constraints([Constraint::Percentage(30), Constraint::Percentage(70)])
-                theme.accent
+            .split(form_chunks[i]);
-            } else {
-                theme.border
-            }))
-            .title(Line::from(field.to_string()))
-            .style(Style::default().bg(theme.bg).fg(theme.fg));
 
-        let paragraph = Paragraph::new(input.as_str())
+        // Render the label on the left
-            .block(block)  // Now using the defined block
+        let label = Paragraph::new(Line::from(Span::styled(
-            .style(if is_active {
+            field.to_string(),
+            Style::default().fg(theme.fg),
+        )));
+        f.render_widget(label, row_chunks[0]);
+
+        // Render the input on the right
+        let input_paragraph = Paragraph::new(input.as_str()).style(if is_active {
             Style::default().fg(theme.highlight)
         } else {
             Style::default().fg(theme.fg)
         });
-
+        f.render_widget(input_paragraph, row_chunks[1]);
-        f.render_widget(paragraph, form_blocks[i]);
     }
 }