--- a/sat_templates/templates/bulma/static/call.css	Fri Aug 18 17:58:04 2023 +0200
+++ b/sat_templates/templates/bulma/static/call.css	Fri Aug 18 18:01:31 2023 +0200
@@ -2,7 +2,6 @@
     position: relative;
     height: 100%;
     width: 100%;
-
 }
 
 #call_container {
@@ -12,25 +11,23 @@
 }
 
 #remote_video, #local_video {
-  border: 3px solid #eee;
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   object-fit: contain;
   background-color: #000;
 }
 
+#local_video {
+  border: 3px solid #eee;
+  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+}
+
 #remote_video {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-#hangup_btn {
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-}
-
 .fullscreen-btn {
   position: absolute;
   top: 10px;
@@ -40,23 +37,25 @@
 
 #local_video {
   position: absolute;
-  bottom: 0;
-  right: 0;
+  /* We set some distance to the bottom to avoid overlap with action buttons */
+  bottom: 60px;
+  right: 10px;
   width: 30%;
   height: 30%;
 }
 
-.controls {
+.call-controls {
   position: absolute;
   bottom: 10px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  left: 10px;
+  right: 10px;
   z-index: 2;
 }
 
+#hangup_btn svg {
+    transform: rotate(135deg);
+}
+
 .inactive::after {
     content: "/";
     position: absolute;
@@ -83,32 +82,27 @@
     min-width: 0;
 }
 
-/* Hide the call button by default on larger screens */
 .card .dropdown-trigger {
     opacity: 0;
     transition: opacity 0.3s;
 }
 
-/* Show the button when the card is hovered */
 .card:hover .dropdown-trigger {
     opacity: 1;
 }
 
-/* Ensure it's always visible on smaller screens */
 @media (max-width: 768px) {
     .card .dropdown-trigger {
         opacity: 1;
     }
 }
 
-/* Position the button at the top right */
 .level-right {
     position: absolute;
     top: 0.5rem;
     right: 0.5rem;
 }
 
-/* Add some spacing between the icon and the edges of the button */
 .icon-dot-3-vert {
     margin: 0 0.5rem;
 }