fix: float buttons row

CHANGELOG.md

@@ -4,14 +4,14 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
-## [1.5.6]
+## [1.5.6] - 2021-06-29
 
 ### Added
 - Show version of the Companion app in the client bar
 
 ### Fix
 - Mute toggle button don't overlap the search text input
-
+- Security updates
 
 ---
 

src/renderer/components/SearchBar.svelte

@@ -91,9 +91,11 @@ function muteToggle() {
     placeholder="Url here..."
     bind:value={localUrl}
     bind:this={searchInput} />
-  <button class="float-button">
-    <IconButton onClick={muteToggle} inactive={false} icons={audioIcon} color="#000" />
-  </button>
+  <div class="float-buttons">
+    <button class="float-button">
+      <IconButton onClick={muteToggle} inactive={false} icons={audioIcon} color="#000" />
+    </button>
+  </div>
   <button
     type="submit"
     on:click={refresh}>
@@ -131,21 +133,25 @@ input:focus {
   background-color: #eee;
 }
 
-.float-button {
+.float-buttons {
   position: absolute;
-  right: 65px;
+  right: 60px;
+  box-sizing: border-box;
   height: 100%;
-  width: 36px;
   display: flex;
-  justify-content: flex-start;
+  flex-direction: row;
+  justify-content: stretch;
   align-items: center;
   background-color: #fff;
-  padding: 0 10px;
-  margin-right: -6px;
-  border: none;
   border-bottom: 1px solid rgb(220, 220, 220);
 }
 
+.float-button {
+  height: 100%;
+  width: 36px;
+  background-color: #fff;
+}
+
 .float-button:hover, .float-button:focus {
   background-color: #eee;
 }