[bug#75296,website] website: blog: Avoid long words overflowing in post previews.

Message ID 20250102183516.17026-1-sirgazil@zoho.com
State New
Headers
Series [bug#75296,website] website: blog: Avoid long words overflowing in post previews. |

Commit Message

Alexis Praga via Guix-patches via Jan. 2, 2025, 6:35 p.m. UTC
  From: Luis Felipe <sirgazil@zoho.com>

This prevents long, unbreakable text (e.g. a commit hash) in post
previews, from overflowing and overlapping the content of other
previews.

* website/themes/initial/css/item-preview.css (.item-preview): Hide
overflow.
---
 website/themes/initial/css/item-preview.css | 1 +
 1 file changed, 1 insertion(+)


base-commit: 53f18814bd231acb5f452de8b511d3260013ca79
  

Comments

Noé Lopez Jan. 3, 2025, 12:56 p.m. UTC | #1
Hi,

I think “overflow-wrap: break-word;” would be more appropriate, as it
does not cut off information or letters in half.

Good evening,
Noé

> From: Luis Felipe <sirgazil@zoho.com>
> 
> This prevents long, unbreakable text (e.g. a commit hash) in post
> previews, from overflowing and overlapping the content of other
> previews.
> 
> * website/themes/initial/css/item-preview.css (.item-preview): Hide
> overflow.
> ---
>  website/themes/initial/css/item-preview.css | 1 +
>  1 file changed, 1 insertion(+)
> 
> diff --git a/website/themes/initial/css/item-preview.css b/website/themes/initial/css/item-preview.css
> index 16e698f..750047a 100644
> --- a/website/themes/initial/css/item-preview.css
> +++ b/website/themes/initial/css/item-preview.css
> @@ -5,6 +5,7 @@
>  .item-preview:visited {
>      color: #4D4D4D;
>      display: block;
> +    overflow: hidden;
>      padding: 10px 15px;
>      text-align: left;
>  }
> 
> base-commit: 53f18814bd231acb5f452de8b511d3260013ca79
> -- 
> 2.46.0
  
Luis Felipe Jan. 3, 2025, 3:17 p.m. UTC | #2
Hi Noé,

On 3/01/25 12:56, Noé Lopez wrote:
> Hi,
>
> I think “overflow-wrap: break-word;” would be more appropriate, as it
> does not cut off information or letters in half.
I think you're right. But how about using both? That way, long text 
would be wrapped, and other kinds of content that could extend beyond 
the container's area would be prevented from overflowing.

Thanks for reviewing.
  

Patch

diff --git a/website/themes/initial/css/item-preview.css b/website/themes/initial/css/item-preview.css
index 16e698f..750047a 100644
--- a/website/themes/initial/css/item-preview.css
+++ b/website/themes/initial/css/item-preview.css
@@ -5,6 +5,7 @@ 
 .item-preview:visited {
     color: #4D4D4D;
     display: block;
+    overflow: hidden;
     padding: 10px 15px;
     text-align: left;
 }