[PR #3181] [MERGED] fix: text overflow on spotlight search results #4275

New issue

Closed

opened 2026-03-17 01:49:28 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:49:28 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3181
Author: @liyasthomas
Created: 7/12/2023
Status: ✅ Merged
Merged: 7/17/2023
Merged by: @AndrewBastin

Base: release/2023.8.0 ← Head: fix/spotlight-text-overflow

📝 Commits (1)

21bc08a fix: text overflow on spotlight search results

📊 Changes

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

View changed files

📝 packages/hoppscotch-common/src/components/app/spotlight/Entry.vue (+20 -20)

📄 Description

`🤖 Generated by Copilot at 323312b`

Summary

🚀🎨♿

Refactor spotlight entry component to use <template> elements instead of <span> and prevent icon shrinking. This improves performance and responsiveness.

<template> tags cut
Unneeded <span>s for speed
Winter pruning done

Walkthrough

Replace <span> elements with <template> elements to avoid rendering unnecessary DOM nodes and improve performance in the spotlight entry component (link)
Prevent the chevron icon from shrinking when the entry text is truncated by adding a flex-shrink-0 class (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/3181 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 7/12/2023 **Status:** ✅ Merged **Merged:** 7/17/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.8.0` ← **Head:** `fix/spotlight-text-overflow` --- ### 📝 Commits (1) - [`21bc08a`](https://github.com/hoppscotch/hoppscotch/commit/21bc08a5f0cc08e6cd05c652fb8cadbb470e486c) fix: text overflow on spotlight search results ### 📊 Changes **1 file changed** (+20 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/app/spotlight/Entry.vue` (+20 -20) </details> ### 📄 Description  ### <samp>🤖 Generated by Copilot at 323312b</samp> ### Summary 🚀🎨♿  Refactor spotlight entry component to use `<template>` elements instead of `<span>` and prevent icon shrinking. This improves performance and responsiveness. > _`<template>` tags cut_ > _Unneeded `<span>`s for speed_ > _Winter pruning done_ ### Walkthrough * Replace `<span>` elements with `<template>` elements to avoid rendering unnecessary DOM nodes and improve performance in the spotlight entry component ([link](https://github.com/hoppscotch/hoppscotch/pull/3181/files?diff=unified&w=0#diff-300593efc11f61fbf739d35fd3e25d679f6c00ac17cb44f4d1297f6aa524fb3bL15-R45)) * Prevent the chevron icon from shrinking when the entry text is truncated by adding a `flex-shrink-0` class ([link](https://github.com/hoppscotch/hoppscotch/pull/3181/files?diff=unified&w=0#diff-300593efc11f61fbf739d35fd3e25d679f6c00ac17cb44f4d1297f6aa524fb3bL15-R45)) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>