Label cant't fit in the "pill" margins #326

New issue

Closed

opened 2026-02-28 01:42:42 -05:00 by deekerman · 2 comments

deekerman commented

2026-02-28 01:42:42 -05:00

Owner

Originally created by @MrEddX on GitHub (Oct 5, 2021).

Is it a duplicate question?
Can't find another one, maybe because it is language specific.

Info
Uptime Kuma Version: 1.7.3
Using Docker?: Yes
Docker Version: 20.10.8
OS: Ubuntu 20.04, Windows 10
Browser: Firefox, Chrome

The Problem
On language where the word for "Down" is a bit longer, the text can't fit in the "red pill" margins on the Dashboard.

Visual representation

I don't think it's a bug, that's why i put the "help" label.

Questions

Do I need to find a shorter word and change it in the bg-BG.js language file? Or,
Is it possible for someone with skills to make the "red pill" bigger, or some kind of "auto fit" trick, if it is not very time consuming?

Originally created by @MrEddX on GitHub (Oct 5, 2021). **Is it a duplicate question?** Can't find another one, maybe because it is language specific. **Info** Uptime Kuma Version: 1.7.3 Using Docker?: Yes Docker Version: 20.10.8 OS: Ubuntu 20.04, Windows 10 Browser: Firefox, Chrome **The Problem** On language where the word for "Down" is a bit longer, the text can't fit in the "red pill" margins on the Dashboard. **Visual representation** ![uptime-kuma-issue-01](https://user-images.githubusercontent.com/66828538/135970507-72eb0473-057e-44f4-81dd-2f9e613a5c80.jpg) I don't think it's a bug, that's why i put the "help" label. **Questions** - Do I need to find a shorter word and change it in the `bg-BG.js` language file? Or, - Is it possible for someone with skills to make the "red pill" bigger, or some kind of "auto fit" trick, if it is not very time consuming?

deekerman

2026-02-28 01:42:42 -05:00

closed this issue
added the
help
label

deekerman commented

2026-02-28 01:42:47 -05:00

Author

Owner

@ImmaZoni commented on GitHub (Oct 6, 2021):

Yes if there is an applicable shorter word to fit in the spot on bg-BG.js this would be an easy fix.
To extend the button you will need to modify the source, so you cant use the docker route.

Unofficial Fix Instructions.

Download Repo and open uptime-kuma/src/components/Status.vue
Change the <template> line to this block of code

<template>
    <label class="badge badge-pill" :class=" 'bg-' + color ">
        <span>{{ text }}</span>
    </label>
</template>

run npm run setup to recompile everything.
start server with node server/server.js and you should be good to go :)

Excuse my super official testing variable name

@ImmaZoni commented on GitHub (Oct 6, 2021): 1. Yes if there is an applicable shorter word to fit in the spot on `bg-BG.js` this would be an easy fix. 2. To extend the button you will need to modify the source, so you cant use the docker route. ### Unofficial Fix Instructions. 1. Download Repo and open `uptime-kuma/src/components/Status.vue` 2. Change the `<template>` line to this block of code ``` <template> <label class="badge badge-pill" :class=" 'bg-' + color "> <span>{{ text }}</span> </label> </template> ``` 3. run `npm run setup` to recompile everything. 4. start server with `node server/server.js` and you should be good to go :) *Excuse my super official testing variable name* ![Screenshot from 2021-10-06 20-10-00](https://user-images.githubusercontent.com/31865152/136314367-15a94056-1d22-417f-b496-333067ac85e8.png)

deekerman commented

2026-02-28 01:42:47 -05:00

Author

Owner

@ImmaZoni commented on GitHub (Oct 6, 2021):

https://github.com/louislam/uptime-kuma/pull/588 Fixes this issue, submitted for you. We will see if @louislam agrees :)

@ImmaZoni commented on GitHub (Oct 6, 2021): https://github.com/louislam/uptime-kuma/pull/588 Fixes this issue, submitted for you. We will see if @louislam agrees :)