change styles

src/components/ModWatchtools.jsx

@@ -357,7 +357,10 @@ function ModWatchtools() {
                               <span
                                 role="button"
                                 tabIndex={-1}
-                                style={{ cursor: 'pointer' }}
+                                style={{
+                                  cursor: 'pointer',
+                                  whiteSpace: 'initial',
+                                }}
                                 title={t`Copy to Clipboard`}
                                 onClick={() => copyTextToClipboard(val)}
                               >{val}</span>

src/components/Rankings.jsx

@@ -19,7 +19,7 @@ const Rankings = () => {
   );
 
   return (
-    <div>
+    <>
       <div>
         <span
           role="button"
@@ -39,7 +39,9 @@ const Rankings = () => {
           onClick={() => setOrderDaily(true)}
         >{t`Daily`}</span>
       </div>
-      <table style={{ display: 'inline' }}>
+      <table style={{
+        display: 'inline',
+      }}>
         <thead>
           {(orderDaily) ? (
             <tr>
@@ -84,7 +86,7 @@ const Rankings = () => {
       <p className="modaltext">
         {t`Ranking updates every 5 min. Daily rankings get reset at midnight UTC.`}
       </p>
-    </div>
+    </>
   );
 };
 

src/styles/default.css

@@ -684,24 +684,27 @@ tr:nth-child(even) {
 .chatflag {
   vertical-align: middle;
 }
-.chatname {
-  padding-left: 4px;
+table {
+  font-size: 13px;
+}
+table td span, .chatname, .mention, .ping {
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
-  max-width: 95px; 
   overflow: hidden;
   vertical-align: bottom;
+}
+table td span {
+  max-width: 140px;
+}
+.chatname {
+  padding-left: 4px;
+  max-width: 100px; 
   background-color: #ebf2f9;
 }
 .mention, .ping {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: inline-block;
-  max-width: 85px; 
-  overflow: hidden;
-  vertical-align: bottom;
   font-size: smaller;
+  max-width: 85px; 
 }
 .mention {
   background-color: #f2eee9;