margin removed

ui/component/commentsList/view.jsx

@@ -398,9 +398,14 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
             value={commentServer}
           >
             {allServers.map(function (server) {
+              let name = server.name;
+              if (name.length > 10) {
+                name = name.substring(0, 10);
+                name = name + '...';
+              }
               return (
                 <option key={server.url} value={server.url}>
-                  {server.name}
+                  {name}
                 </option>
               );
             })}

ui/scss/component/_card.scss

@@ -662,9 +662,8 @@
 .button_selectedServer {
   display: inline;
   float: right;
-  min-width: var(--side-nav-width--micro);
-  max-width: var(--side-nav-width);
-  margin-left: -10px;
+  min-width: var(--input-select-server-min-width);
+  max-width: var(--input-select-server-max-width);
 }
 
 .button_refresh {

ui/scss/component/_comments.scss

@@ -37,16 +37,12 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__sort {
-  margin-right: var(--spacing-s);
   display: inline-block;
 
   @media (min-width: $breakpoint-small) {
     margin-top: 0;
     display: inline;
   }
-  @media (max-width: $breakpoint-small) {
-    margin-right: 0;
-  }
 }
 
 .comment {

ui/scss/init/_vars.scss

@@ -62,6 +62,9 @@ $spacing-width: 36px;
   --floating-viewer-container-height: calc(var(--floating-viewer-height) + var(--floating-viewer-info-height));
   --option-select-width: 8rem;
 
+  --input-select-server-min-width: 100px;
+  --input-select-server-max-width: 250px;
+
   // Text
   --text-max-width: 660px;
   --text-link-padding: 4px;