Merge pull request #1427 from squidowl/issue/1426

casperstorm · web-flow · commit 5f7d6730c038 · 2026-01-29T22:56:45.000+01:00
Add configurable preview dimensions and limit card description height
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,13 +5,15 @@ Added:
 - Settings to disable (selectively, or for the entire server) confirmation of delivery for sent messages
 - Setting to adjust inner spacing and outer padding for panes (`pane.gap.inner`, `pane.gap.outer`)
 - Setting to style unread query buffers as highlights in the sidebar (`sidebar.unread_indicator.query_as_highlight`)
+- Settings to configure card and imagge preview dimensions 
 
 Fixed:
 
 - Buffer not showing history until resize
 - Previews are fetched through the same proxy as the server (or default proxy) for HTTP/SOCKS5 proxies
 - No longer highlight nickname mentions in sent messages in certain scenarios
 - Filters applied to one server will no longer hide query panes for other servers
+- Card preview description text is now limited in height to prevent excessive text display
 
 Changed:
 
diff --git a/book/src/configuration/preview/card.md b/book/src/configuration/preview/card.md
@@ -7,6 +7,9 @@ Specific card preview settings.
   - [Configuration](#configuration)
     - [show\_image](#show_image)
     - [round\_image\_corners](#round_image_corners)
+    - [max\_width](#max_width)
+    - [description\_max\_height](#description_max_height)
+    - [image\_max\_height](#image_max_height)
     - [include](#include)
     - [exclude](#exclude)
 
@@ -46,6 +49,45 @@ Round the corners of the image in the card preview (if shown).
 round_image_corners = true
 ```
 
+### max_width
+
+Maximum width of the card in pixels.
+
+```toml
+# Type: number
+# Values: any positive number
+# Default: 400.0
+
+[preview.card]
+max_width = 400.0
+```
+
+### description_max_height
+
+Maximum height of the description text in pixels.
+
+```toml
+# Type: number
+# Values: any positive number
+# Default: 100.0
+
+[preview.card]
+description_max_height = 100.0
+```
+
+### image_max_height
+
+Maximum height of the image in the card preview in pixels.
+
+```toml
+# Type: number
+# Values: any positive number
+# Default: 200.0
+
+[preview.card]
+image_max_height = 200.0
+```
+
 ### exclude
 
 [Exclusion conditions](/configuration/conditions.md) for when card previews will
diff --git a/book/src/configuration/preview/image.md b/book/src/configuration/preview/image.md
@@ -7,6 +7,8 @@ Specific image preview settings.
   - [Configuration](#configuration)
     - [action](#action)
     - [round\_corners](#round_corners)
+    - [max\_width](#max_width)
+    - [max\_height](#max_height)
     - [include](#include)
     - [exclude](#exclude)
 
@@ -46,6 +48,32 @@ Round the corners of the image.
 round_corners = true
 ```
 
+### max_width
+
+Maximum width of the image in pixels.
+
+```toml
+# Type: number
+# Values: any positive number
+# Default: 550.0
+
+[preview.image]
+max_width = 550.0
+```
+
+### max_height
+
+Maximum height of the image in pixels.
+
+```toml
+# Type: number
+# Values: any positive number
+# Default: 350.0
+
+[preview.image]
+max_height = 350.0
+```
+
 ### exclude
 
 [Exclusion conditions](/configuration/conditions.md) for when image previews
diff --git a/data/src/config/preview.rs b/data/src/config/preview.rs
@@ -168,6 +168,12 @@ pub struct Card {
     pub include: Option<Inclusivities>,
     pub show_image: bool,
     pub round_image_corners: bool,
+    /// Maximum width of the card in pixels
+    pub max_width: f32,
+    /// Maximum height of the description in pixels
+    pub description_max_height: f32,
+    /// Maximum height of the image in pixels
+    pub image_max_height: f32,
 }
 
 impl Default for Card {
@@ -177,6 +183,9 @@ impl Default for Card {
             include: None,
             show_image: true,
             round_image_corners: true,
+            max_width: 400.0,
+            description_max_height: 100.0,
+            image_max_height: 200.0,
         }
     }
 }
@@ -223,6 +232,10 @@ pub struct Image {
     pub exclude: Option<Inclusivities>,
     pub include: Option<Inclusivities>,
     pub round_corners: bool,
+    /// Maximum width of the image in pixels
+    pub max_width: f32,
+    /// Maximum height of the image in pixels
+    pub max_height: f32,
 }
 
 impl Default for Image {
@@ -232,6 +245,8 @@ impl Default for Image {
             exclude: None,
             include: None,
             round_corners: true,
+            max_width: 550.0,
+            max_height: 350.0,
         }
     }
 }
diff --git a/src/buffer/scroll_view.rs b/src/buffer/scroll_view.rs
@@ -1481,13 +1481,20 @@ fn preview_row<'a>(
                                     .map(font::get)
                             ),
                         description.as_ref().map(|description| {
-                            text(description)
-                                .shaping(text::Shaping::Advanced)
-                                .style(theme::text::secondary)
-                                .font_maybe(
-                                    theme::font_style::secondary(theme)
-                                        .map(font::get),
-                                )
+                            container(
+                                text(description)
+                                    .shaping(text::Shaping::Advanced)
+                                    .wrapping(text::Wrapping::WordOrGlyph)
+                                    .style(theme::text::secondary)
+                                    .font_maybe(
+                                        theme::font_style::secondary(theme)
+                                            .map(font::get),
+                                    ),
+                            )
+                            .clip(false)
+                            .max_height(
+                                config.preview.card.description_max_height,
+                            )
                         }),
                         config.preview.card.show_image.then_some(
                             container(
@@ -1505,11 +1512,12 @@ fn preview_row<'a>(
                                     )
                                     .content_fit(ContentFit::ScaleDown)
                             )
-                            .max_height(200)
+                            .padding(Padding::default().top(8))
+                            .max_height(config.preview.card.image_max_height)
                         ),
                     ]
                     .spacing(8)
-                    .max_width(400),
+                    .max_width(config.preview.card.max_width),
                 )
                 .padding(8),
             )
@@ -1528,8 +1536,8 @@ fn preview_row<'a>(
                         })
                         .content_fit(ContentFit::ScaleDown),
                 )
-                .max_width(550)
-                .max_height(350),
+                .max_width(config.preview.image.max_width)
+                .max_height(config.preview.image.max_height),
             )
             .on_press(match config.preview.image.action {
                 data::config::preview::ImageAction::OpenUrl => {
@@ -1550,9 +1558,12 @@ fn preview_row<'a>(
         .map(|timestamp| {
             selectable_text(" ".repeat(timestamp.chars().count()))
         });
+    let space = selectable_text(" ");
 
     let aligned_content = match &config.buffer.nickname.alignment {
-        data::buffer::Alignment::Left => row![timestamp_gap, content].into(),
+        data::buffer::Alignment::Left => {
+            row![timestamp_gap, space, content].into()
+        }
         data::buffer::Alignment::Right => {
             let prefixes = message.target.prefixes().map_or(
                 right_aligned_width.and_then(|_| {
@@ -1581,7 +1592,6 @@ fn preview_row<'a>(
                 },
             );
 
-            let space = selectable_text(" ");
             let with_access_levels = config.buffer.nickname.show_access_levels;
             let truncate = config.buffer.nickname.truncate;
 
@@ -1610,9 +1620,11 @@ fn preview_row<'a>(
             };
 
             let timestamp_nickname_row =
-                row![timestamp_gap, prefixes, nick, space,];
+                row![timestamp_gap, space, prefixes, nick];
+
+            let space = selectable_text(" ");
 
-            row![timestamp_nickname_row, content].into()
+            row![timestamp_nickname_row, space, content].into()
         }
         data::buffer::Alignment::Top => content,
     };

Original file line number	Diff line number	Diff line change
`@@ -168,6 +168,12 @@ pub struct Card {`
`168`	`168`	`pub include: Option<Inclusivities>,`
`169`	`169`	`pub show_image: bool,`
`170`	`170`	`pub round_image_corners: bool,`
	`171`	`+ /// Maximum width of the card in pixels`
	`172`	`+ pub max_width: f32,`
	`173`	`+ /// Maximum height of the description in pixels`
	`174`	`+ pub description_max_height: f32,`
	`175`	`+ /// Maximum height of the image in pixels`
	`176`	`+ pub image_max_height: f32,`
`171`	`177`	`}`
`172`	`178`
`173`	`179`	`impl Default for Card {`
`@@ -177,6 +183,9 @@ impl Default for Card {`
`177`	`183`	`include: None,`
`178`	`184`	`show_image: true,`
`179`	`185`	`round_image_corners: true,`
	`186`	`+ max_width: 400.0,`
	`187`	`+ description_max_height: 100.0,`
	`188`	`+ image_max_height: 200.0,`
`180`	`189`	`}`
`181`	`190`	`}`
`182`	`191`	`}`
`@@ -223,6 +232,10 @@ pub struct Image {`
`223`	`232`	`pub exclude: Option<Inclusivities>,`
`224`	`233`	`pub include: Option<Inclusivities>,`
`225`	`234`	`pub round_corners: bool,`
	`235`	`+ /// Maximum width of the image in pixels`
	`236`	`+ pub max_width: f32,`
	`237`	`+ /// Maximum height of the image in pixels`
	`238`	`+ pub max_height: f32,`
`226`	`239`	`}`
`227`	`240`
`228`	`241`	`impl Default for Image {`
`@@ -232,6 +245,8 @@ impl Default for Image {`
`232`	`245`	`exclude: None,`
`233`	`246`	`include: None,`
`234`	`247`	`round_corners: true,`
	`248`	`+ max_width: 550.0,`
	`249`	`+ max_height: 350.0,`
`235`	`250`	`}`
`236`	`251`	`}`
`237`	`252`	`}`