[I] [BUG] UI: Text overflow causes clipping and incorrect border rendering in the title/display area. [hertzbeat]</span></a></span> </h1> <p class="darkgray font13"> <span class="sender pipe"><a href="/search?l=notifications@hertzbeat.apache.org&q=from:%22via+GitHub%22" rel="nofollow"><span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name">via GitHub</span></span></a></span> <span class="date"><a href="/search?l=notifications@hertzbeat.apache.org&q=date:20251211" rel="nofollow">Thu, 11 Dec 2025 09:29:07 -0800</a></span> </p> </div> <div itemprop="articleBody" class="msgBody"> <!--X-Body-of-Message--> <pre> KOYR opened a new issue, #3905: URL: <a rel="nofollow" href="https://github.com/apache/hertzbeat/issues/3905">https://github.com/apache/hertzbeat/issues/3905</a></pre><pre> ### Is there an existing issue for this? - [x] I have searched the existing issues ### Current Behavior <img width="525" height="392" alt="Image" src="<a rel="nofollow" href="https://github.com/user-attachments/assets/d922035a-4870-470a-80f9-4d9979e68664"">https://github.com/user-attachments/assets/d922035a-4870-470a-80f9-4d9979e68664"</a>; /> The overflowing text content in the Settings/Labels page is vertically clipped, causing the bottom of the text to be cut off. A misaligned or incorrectly sized red border appears around the clipped area. (The red border suggests a warning or error state, but its improper rendering makes the issue worse). ### Expected Behavior Text Handling: The component should handle overflow gracefully: Ideally, the text should display an ellipsis (...) at the end, and the full content should be accessible via a tooltip on hover. Alternatively, the text should wrap if the container height is designed to accommodate multiple lines. Border/Style: The bounding box (e.g., the red border for the error state) should correctly encompass the entire expected content area and not cut off the text. ### Steps To Reproduce 1. Create or load a data entry with an identifier string that is long enough to overflow the container's designated display width.Example string shown in the image: TEST:XXXXONE - XXXXTWO - XXXTHREE 2. View the list or card containing this long entry. ### Environment ```markdown HertzBeat version(s): 1.7.3 ``` ### Debug logs _No response_ ### Anything else? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@hertzbeat.apache.org For additional commands, e-mail: notifications-h...@hertzbeat.apache.org </pre> </div> <div class="msgButtons margintopdouble"> <ul class="overflow"> <li class="msgButtonItems"><a class="button buttonleft " accesskey="p" href="msg14675.html">Previous message</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="c" href="index.html#14677">View by thread</a></li> <li class="msgButtonItems textaligncenter"><a class="button" accesskey="i" href="maillist.html#14677">View by date</a></li> <li class="msgButtonItems textalignright"><a class="button buttonright " accesskey="n" href="msg14678.html">Next message</a></li> </ul> </div> <a name="tslice"></a> <div class="tSliceList margintopdouble"> <ul class="icons monospace"> <li class="icons-email tSliceCur"><span class="subject">[I] [BUG] <title>UI: Text overflow causes clipping and in...</span> <span class="sender italic">via GitHub</span></li> <li><ul> <li class="icons-email"><span class="subject"><a href="msg14678.html">Re: [I] [BUG] <title>UI: Text overflow causes clippi...</a></span> <span class="sender italic">via GitHub</span></li> <li class="icons-email"><span class="subject"><a href="msg14679.html">Re: [I] [BUG] <title>UI: Text overflow causes clippi...</a></span> <span class="sender italic">via GitHub</span></li> <li class="icons-email"><span class="subject"><a href="msg14738.html">Re: [I] [BUG] UI: Text overflow causes clipping and incorr...</a></span> <span class="sender italic">via GitHub</span></li> </ul> </ul> </div> <div class="overflow msgActions margintopdouble"> <div class="msgReply" > <h2> Reply via email to </h2> <form method="POST" action="/mailto.php"> <input type="hidden" name="subject" value="[I] [BUG] <title>UI: Text overflow causes clipping and incorrect border rendering in the title/display area. [hertzbeat]"> <input type="hidden" name="msgid" value="I_kwDOGyeqAs7dv2Mh@gitbox.apache.org"> <input type="hidden" name="relpath" value="notifications@hertzbeat.apache.org/msg14677.html"> <input type="submit" value=" via GitHub "> </form> </div> </div> </div> <div class="aside" role="complementary"> <div class="logo"> <a href="/"><img src="/logo.png" width=247 height=88 alt="The Mail Archive"></a> </div> <form class="overflow" action="/search" method="get"> <input type="hidden" name="l" value="notifications@hertzbeat.apache.org"> <label class="hidden" for="q">Search the site</label> <input class="submittext" type="text" id="q" name="q" placeholder="Search notifications"> <input class="submitbutton" name="submit" type="image" src="/submit.png" alt="Submit"> </form> <div class="nav margintop" id="nav" role="navigation"> <ul class="icons font16"> <li class="icons-home"><a href="/">The Mail Archive home</a></li> <li class="icons-list"><a href="/notifications@hertzbeat.apache.org/">notifications - all messages</a></li> <li class="icons-about"><a href="/notifications@hertzbeat.apache.org/info.html">notifications - about the list</a></li> <li class="icons-expand"><a href="/search?l=notifications@hertzbeat.apache.org&q=subject:%22%5C%5BI%5C%5D+%5C%5BBUG%5C%5D+%3Ctitle%3EUI%5C%3A+Text+overflow+causes+clipping+and+incorrect+border+rendering+in+the+title%5C%2Fdisplay+area.+%5C%5Bhertzbeat%5C%5D%22&o=newest&f=1" title="e" id="e">Expand</a></li> <li class="icons-prev"><a href="msg14675.html" title="p">Previous message</a></li> <li class="icons-next"><a href="msg14678.html" title="n">Next message</a></li> </ul> </div> <div class="listlogo margintopdouble"> </div> <div class="margintopdouble"> </div> </div> </div> <div class="footer" role="contentinfo"> <ul> <li><a href="/">The Mail Archive home</a></li> <li><a href="/faq.html#newlist">Add your mailing list</a></li> <li><a href="/faq.html">FAQ</a></li> <li><a href="/faq.html#support">Support</a></li> <li><a href="/faq.html#privacy">Privacy</a></li> <li class="darkgray">I_kwDOGyeqAs7dv2Mh@gitbox.apache.org</li> </ul> </div> </body> </html> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9dd1d93edb224bba',t:'MTc3MzY0NDA4OA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>