[PR #1066] [MERGED] Fixed broken tick icons placement in Settings #3036

New issue

Closed

opened 2026-03-17 00:41:24 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:41:24 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1066
Author: @Reflex-Gravity
Created: 8/11/2020
Status: ✅ Merged
Merged: 8/11/2020
Merged by: @liyasthomas

Base: master ← Head: master

📝 Commits (1)

54169fe Fixed broken tick icons placement in Settings

📊 Changes

1 file changed (+6 additions, -0 deletions)

View changed files

📝 components/settings/swatch.vue (+6 -0)

📄 Description

Hi,

I have added a few CSS to fix the broken placement of Tick Icons in Settings.

This PR fixes #1057

Below are the changes, I have implemented:

CSS for the parent element of tick icon:

   position:relative

CSS for the tick icon to place it in the center:

  position:absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

_{🔄 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/1066 **Author:** [@Reflex-Gravity](https://github.com/Reflex-Gravity) **Created:** 8/11/2020 **Status:** ✅ Merged **Merged:** 8/11/2020 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (1) - [`54169fe`](https://github.com/hoppscotch/hoppscotch/commit/54169fe22beaf961e1a192f42047d9bd6a7ac556) Fixed broken tick icons placement in Settings ### 📊 Changes **1 file changed** (+6 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `components/settings/swatch.vue` (+6 -0) </details> ### 📄 Description Hi, I have added a few CSS to fix the broken placement of Tick Icons in Settings. This PR fixes #1057 **Below are the changes, I have implemented:** CSS for the parent element of tick icon: ```CSS position:relative ``` CSS for the tick icon to place it in the center: ```CSS position:absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; ``` ![image](https://user-images.githubusercontent.com/19655674/89845888-59227400-db9d-11ea-9c05-ffd89bc15978.png) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>