tweak: stop showing ellipsis in the text-boxes in the right sidebar and

make search text in header not extend outside of the search-box

Author: TBubba

src/renderer/components/RightBrowseSidebar.tsx

@@ -90,7 +90,8 @@ export class RightBrowseSidebar extends React.Component<IRightBrowseSidebarProps
       const dateAdded = new Date(game.dateAdded).toUTCString();
       const screenshotSrc = this.props.gameImages.getScreenshotPath(game.title, game.platform);
       return (
-        <div className={'browse-right-sidebar simple-scroll'+(canEdit?' browse-right-sidebar--edit-enabled':'')}>
+        <div className={'browse-right-sidebar simple-scroll '+
+                        (canEdit ? 'browse-right-sidebar--edit-enabled' : 'browse-right-sidebar--edit-disabled')}>
           {/* -- Title & Developer(s) -- */}
           <div className='browse-right-sidebar__section'>
             <div className='browse-right-sidebar__row'>
@@ -119,10 +120,10 @@ export class RightBrowseSidebar extends React.Component<IRightBrowseSidebarProps
                         <>
                           {/* "Edit" Button */}
                           { isPlaceholder ? undefined : (
-                              <div className='browse-right-sidebar__title-row__buttons__edit-button'
-                                  title='Edit Game' onClick={this.props.onEditClick}>
-                                <OpenIcon icon='pencil' />
-                              </div>
+                            <div className='browse-right-sidebar__title-row__buttons__edit-button'
+                                 title='Edit Game' onClick={this.props.onEditClick}>
+                              <OpenIcon icon='pencil' />
+                            </div>
                           ) }
                           {/* "Remove From Playlist" Button */}
                           { gamePlaylistEntry ? (

static/renderer/styles/styles.css

@@ -454,13 +454,14 @@ body {
   width: 12em;
   padding: 0.25em;
   margin-right: 0.5em;
+  overflow: hidden;
   /* Pimp */
   border: 1px solid var(--theme__search-bar__outline-color);
   background-color: var(--theme__background-color);
 }
 .header__search__input, .header__search__input:active {
   font-size: 1em;
-  /* Pimp */
+  width: 100%;
   color: var(--theme__text-color);
   background: none;
   border: none;
@@ -969,7 +970,7 @@ body {
   flex: 0 0 auto;
   white-space: pre;
 }
-.browse-right-sidebar__row--one-line > :last-child {
+.browse-right-sidebar--edit-disabled .browse-right-sidebar__row--one-line > :last-child {
   flex: 1 1 auto;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -981,7 +982,7 @@ body {
 .browse-right-sidebar__row--additional-applications-name {
   display: flex;
 }
-.browse-right-sidebar__row--additional-applications-name > :first-child {
+.browse-right-sidebar--edit-disabled .browse-right-sidebar__row--additional-applications-name > :first-child {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1007,7 +1008,7 @@ body {
   display: block;
   overflow-y: visible;
 }
-.browse-right-sidebar__title-row__title > * {
+.browse-right-sidebar--edit-disabled .browse-right-sidebar__title-row__title > * {
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;