Live View Axis Fix Top

.live-view-container 
  height: 400px;
  overflow-y: auto;
  position: relative;
  border: 1px solid #ccc;
.axis-header 
position: sticky;
top: 0;
background-color: #f5f5f5;
display: flex;
z-index: 10;
border-bottom: 2px solid #333;
font-weight: bold;

.axis-cell, .data-cell 
flex: 1;
padding: 8px;
 live view axis fix top
.data-rows 
display: flex;
flex-direction: column;
 the camera might suddenly lurch

If you try to look straight down (90 degrees) and then orbit, the camera might suddenly spin 180 degrees. This happens because the software loses track of "forward." in extreme cases

<div class="live-view-container">
  <div class="axis-header">
    <div class="axis-cell">Time</div>
    <div class="axis-cell">Value</div>
    <div class="axis-cell">Status</div>
  </div>
  <div class="data-rows" id="liveData">
    <!-- dynamically injected rows -->
  </div>
</div>

Imagine you are designing a skyscraper. You are orbiting around the 50th floor, looking slightly down. Without "Axis Fix Top," as you drag your mouse to the left, the camera might suddenly lurch, turning the horizon diagonal. The building looks like it is falling over. This is technically called Camera Roll or, in extreme cases, Gimbal Lock.

"Live View Axis Fix Top" solves three major problems: