[PR #3143] [CLOSED] refactor: modified shortcodes UI to maintain table layout in smaller screens #4249

New issue

Closed

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

kerem commented

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

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3143
Author: @joeljstephen
Created: 6/16/2023
Status: ❌ Closed

Base: main ← Head: refactor/shortcodes-ui

📝 Commits (2)

7b89821 refactor: modified shortcode to maintain table ui in smaller screens
e2e030c chore: cleaned up code

📊 Changes

3 files changed (+14 additions, -8 deletions)

View changed files

📝 packages/hoppscotch-common/src/components.d.ts (+5 -0)
📝 packages/hoppscotch-common/src/components/profile/Shortcode.vue (+6 -3)
📝 packages/hoppscotch-common/src/components/profile/Shortcodes.vue (+3 -5)

📄 Description

Issue Number

Closes HFE-104

Description

This PR aims to address the UI inconsistencies in the Shortcodes table UI where the headers of the table disappear and the table collapses to a multiline container when screen size is adjusted. The new UI changes makes sure that the table layout holds even for smaller screen sizes.

Checks

My pull request adheres to the code style of this project
My code requires changes to the documentation
I have updated the documentation as required
All the tests have passed

_{🔄 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/3143 **Author:** [@joeljstephen](https://github.com/joeljstephen) **Created:** 6/16/2023 **Status:** ❌ Closed **Base:** `main` ← **Head:** `refactor/shortcodes-ui` --- ### 📝 Commits (2) - [`7b89821`](https://github.com/hoppscotch/hoppscotch/commit/7b898213f379f81a60dd4d95f6a47200813c8c43) refactor: modified shortcode to maintain table ui in smaller screens - [`e2e030c`](https://github.com/hoppscotch/hoppscotch/commit/e2e030c9195d8800be0509a97683a1620e71a078) chore: cleaned up code ### 📊 Changes **3 files changed** (+14 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components.d.ts` (+5 -0) 📝 `packages/hoppscotch-common/src/components/profile/Shortcode.vue` (+6 -3) 📝 `packages/hoppscotch-common/src/components/profile/Shortcodes.vue` (+3 -5) </details> ### 📄 Description ### Issue Number Closes HFE-104 ### Description This PR aims to address the UI inconsistencies in the Shortcodes table UI where the headers of the table disappear and the table collapses to a multiline container when screen size is adjusted. The new UI changes makes sure that the table layout holds even for smaller screen sizes. <img width="860" alt="image" src="https://github.com/hoppscotch/hoppscotch/assets/70131076/0ce22c1b-a5d2-4d30-8c41-18d68bc09753"> ### Checks  - [x] My pull request adheres to the code style of this project - [ ] My code requires changes to the documentation - [ ] I have updated the documentation as required - [x] All the tests have passed --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>