[PR #3160] [MERGED] fix: text overflow on details summary label #4258

New issue

Closed

opened 2026-03-17 01:48:39 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:48:39 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3160
Author: @liyasthomas
Created: 6/26/2023
Status: ✅ Merged
Merged: 6/26/2023
Merged by: @AndrewBastin

Base: release/2023.4.7 ← Head: fix/text-overflow-on-details-summary

📝 Commits (2)

bf98bb5 fix: text overflow on details summary label
11526e6 fix: overflow word in shortcut empty search

📊 Changes

3 files changed (+11 additions, -6 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/app/Shortcuts.vue (+3 -2)
📝 packages/hoppscotch-common/src/components/history/index.vue (+4 -2)
📝 packages/hoppscotch-common/src/components/http/TestResult.vue (+4 -2)

📄 Description

`🤖 Generated by Copilot at 0212287`

Summary

🎨📱🛠️

Added CSS classes to span and icon elements in history and test result components to prevent text overflow and improve alignment. These changes improve the responsiveness and usability of the hoppscotch web app.

span and icon classes
truncate and align the text
a crisp autumn web

Walkthrough

Add truncate and flex classes to prevent overflow and misalignment of history item name and icon (link)
Add truncate class to prevent overflow of environment name in test result component (link)

_{🔄 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/3160 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 6/26/2023 **Status:** ✅ Merged **Merged:** 6/26/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.4.7` ← **Head:** `fix/text-overflow-on-details-summary` --- ### 📝 Commits (2) - [`bf98bb5`](https://github.com/hoppscotch/hoppscotch/commit/bf98bb5ea20fa824692c2e1c8cfb9b7c4110f7d0) fix: text overflow on details summary label - [`11526e6`](https://github.com/hoppscotch/hoppscotch/commit/11526e6a179508b72e5e19e17e43c3de040371c9) fix: overflow word in shortcut empty search ### 📊 Changes **3 files changed** (+11 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/app/Shortcuts.vue` (+3 -2) 📝 `packages/hoppscotch-common/src/components/history/index.vue` (+4 -2) 📝 `packages/hoppscotch-common/src/components/http/TestResult.vue` (+4 -2) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at 0212287</samp> ### Summary 🎨📱🛠️  Added CSS classes to `span` and `icon` elements in `history` and `test result` components to prevent text overflow and improve alignment. These changes improve the responsiveness and usability of the hoppscotch web app. > _`span` and `icon` classes_ > _truncate and align the text_ > _a crisp autumn web_ ### Walkthrough * Add `truncate` and `flex` classes to prevent overflow and misalignment of history item name and icon ([link](https://github.com/hoppscotch/hoppscotch/pull/3160/files?diff=unified&w=0#diff-5f412cc4a8427f6ad9e1962b8d5c7a17e5c34193ed45cd17242a903f2ad129d8L75-R79)) * Add `truncate` class to prevent overflow of environment name in test result component ([link](https://github.com/hoppscotch/hoppscotch/pull/3160/files?diff=unified&w=0#diff-b71d05c6263d3f2352429bfc7959f4790dffd848b8e7811e5ec23d0682d01ea4L31-R35)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>