[PR #4173] [MERGED] fix: `<img>` is flex's immediate child therefore it stretch to its parent width #4686

New issue

Closed

opened 2026-03-17 02:12:07 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:12:07 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/4173
Author: @anwarulislam
Created: 7/7/2024
Status: ✅ Merged
Merged: 7/17/2024
Merged by: @nivedin

Base: patch ← Head: fix/image-lens-render

📝 Commits (2)

2982126 fix: img is flex immediate child and renders in full width
df4aa5f chore: remove unnecesary use of flex

📊 Changes

1 file changed (+2 additions, -2 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue (+2 -2)

📄 Description

Description

We noticed that images are always rendered full width, even if they’re small. For example, a 200x200 pixel image would stretch across its entire parent container. This PR fixes that issue!

What's changed

Before	After

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/4173 **Author:** [@anwarulislam](https://github.com/anwarulislam) **Created:** 7/7/2024 **Status:** ✅ Merged **Merged:** 7/17/2024 **Merged by:** [@nivedin](https://github.com/nivedin) **Base:** `patch` ← **Head:** `fix/image-lens-render` --- ### 📝 Commits (2) - [`2982126`](https://github.com/hoppscotch/hoppscotch/commit/29821265dca2facdb37df0c7ca33698b75fd8803) fix: img is flex immediate child and renders in full width - [`df4aa5f`](https://github.com/hoppscotch/hoppscotch/commit/df4aa5f49b12cfb7f7c87d3d627f82992dc4463d) chore: remove unnecesary use of flex ### 📊 Changes **1 file changed** (+2 additions, -2 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/lenses/renderers/ImageLensRenderer.vue` (+2 -2) </details> ### 📄 Description ## Description We noticed that images are always rendered full width, even if they’re small. For example, a 200x200 pixel image would stretch across its entire parent container. This PR fixes that issue! ### What's changed | Before | After | |--------|-------| | ![image](https://github.com/hoppscotch/hoppscotch/assets/26295990/a4fbcdc0-e73f-477e-80de-17422749e568)|![image](https://github.com/hoppscotch/hoppscotch/assets/26295990/cf66f6fc-f194-4894-8e18-57a2269656c1)| --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>