From 51c36a7c32378056cf6d00858494a202f6a450ca Mon Sep 17 00:00:00 2001
From: Amio <amio.cn@gmail.com>
Date: Sat, 18 Mar 2023 16:10:24 +0800
Subject: [PATCH] fix: text wrap in homepage badge builder

---
 components/builder-bar.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/builder-bar.tsx b/components/builder-bar.tsx
index fa507ed..2f00178 100644
--- a/components/builder-bar.tsx
+++ b/components/builder-bar.tsx
@@ -30,7 +30,9 @@ export default class BuilderBar extends React.Component<BuilderBarProps> {
 
     return (
       <label>
-        <span>{host}</span>
+        <span className='left-host'>
+          <span>{host}</span>
+        </span>
         <input
           tabIndex={1}
           spellCheck={false}
@@ -41,7 +43,7 @@ export default class BuilderBar extends React.Component<BuilderBarProps> {
           onBlur={this.props.onBlur}
           value={badgeURL}
         />
-        <style>{`
+        <style jsx>{`
           label {
             height: 100px;
             width: 100%;
@@ -55,11 +57,15 @@ export default class BuilderBar extends React.Component<BuilderBarProps> {
           span, input {
             font: 16px/24px monospace;
           }
-          span {
+          .left-host {
             display: inline-block;
             text-align: right;
             width: 234px;
           }
+          .left-host > span {
+            float: right;
+            white-space: nowrap;
+          }
           input {
             height: 24px;
             padding: 0;