diff --git a/CHANGELOG.md b/CHANGELOG.md
index 97fbaa25b..ee7f686e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,13 +6,11 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### [v17.6.4](https://github.com/TeselaGen/openVectorEditor/compare/v17.3.12...v17.6.4)
 
-- Adjust font size for name in circular view [`#834`](https://github.com/TeselaGen/openVectorEditor/pull/834)
-- Tnr add zoom to linear view [`#828`](https://github.com/TeselaGen/openVectorEditor/pull/828)
 - Added rounded corners to amino acids [`#819`](https://github.com/TeselaGen/openVectorEditor/pull/819)
 - small selection color style fix https://github.com/TeselaGen/lims/issues/9038#event-6627607729 [`#9038`](https://github.com/TeselaGen/lims/issues/9038)
-- bumping new minor version w/ linear view zoom v1 [`8b406cd`](https://github.com/TeselaGen/openVectorEditor/commit/8b406cd95ea665f10b7b44e84403b6c0ef6f4d17)
-- making sequences track their default enzyme filter by default; improving setting of default global enzyme filter [`e353f3c`](https://github.com/TeselaGen/openVectorEditor/commit/e353f3c46b0fc1d67ef9f81b537f6ac675901d9f)
-- reverting persist enzyme filter UI changes [`2d81d4a`](https://github.com/TeselaGen/openVectorEditor/commit/2d81d4a556ba0dba8daa86f94420e635b347c9b8)
+- adding a coercion function to manage the alignment view zoom [`4e16ab4`](https://github.com/TeselaGen/openVectorEditor/commit/4e16ab440ecfe4f6344de3fe191a597b0da18a48)
+- improving sequence length toggle, increasing allowable linear view zoom size [`5c4594b`](https://github.com/TeselaGen/openVectorEditor/commit/5c4594b750c48288158c296231f30b168c36cc1b)
+- added linear view test cases [`813890a`](https://github.com/TeselaGen/openVectorEditor/commit/813890a0530ed8bd49a85b4cfee7834dc4b17155)
 
 #### [v17.3.12](https://github.com/TeselaGen/openVectorEditor/compare/v17.2.7...v17.3.12)
 
diff --git a/cypress/integration/alignment.spec.js b/cypress/integration/alignment.spec.js
index 67cf843b5..21fb7b786 100644
--- a/cypress/integration/alignment.spec.js
+++ b/cypress/integration/alignment.spec.js
@@ -1,4 +1,15 @@
 describe("alignment", function () {
+  it("it should re-draw the labels of features/parts/primers when a feature is so long that the middle of the label does not fit into view", function () {
+    cy.visit("#/Alignment");
+    cy.get(".tg-alignment-visibility-toggle").click();
+    cy.contains("cds feature").should("not.exist");
+    cy.get(".bp3-popover .bp3-control:contains(Features)").click();
+    cy.contains("cds feature");
+    cy.get(".tg-alignment-visibility-toggle").click();
+    cy.contains("text", "long feat whose label should still appear").should(
+      "be.visible"
+    );
+  });
   it("it should show an unmapped warning", function () {
     cy.visit("#/Alignment");
     cy.get(".bp3-icon-warning-sign");
diff --git a/demo/src/exampleData/msaAlignment.json b/demo/src/exampleData/msaAlignment.json
index 51f879194..5ed2de423 100644
--- a/demo/src/exampleData/msaAlignment.json
+++ b/demo/src/exampleData/msaAlignment.json
@@ -21,8 +21,8 @@
         "id": "0bd61b29-d822-474f-86e1-877c476fb5dc",
         "features": [{
           "start": 10,
-          "end": 50,
-          "name": "cds feature",
+          "end": 500,
+          "name": "long feat whose label should still appear",
           "type": "CDS",
           "id": "5ac3f0a199aae6653c0e7d41",
           "forward": true,
diff --git a/src/AlignmentView/AlignmentVisibilityTool.js b/src/AlignmentView/AlignmentVisibilityTool.js
index a14290aa3..b5a5a415e 100644
--- a/src/AlignmentView/AlignmentVisibilityTool.js
+++ b/src/AlignmentView/AlignmentVisibilityTool.js
@@ -19,6 +19,7 @@ export default pureNoFunc(function AlignmentVisibilityTool(props) {
       target={
         <Tooltip content="Visibility Options">
           <Button
+            className="tg-alignment-visibility-toggle"
             small
             rightIcon="caret-down"
             intent={Intent.PRIMARY}
diff --git a/src/AlignmentView/index.js b/src/AlignmentView/index.js
index 037b82e7e..7012bc161 100644
--- a/src/AlignmentView/index.js
+++ b/src/AlignmentView/index.js
@@ -3,8 +3,6 @@ import React from "react";
 import { connect } from "react-redux";
 import {
   Button,
-  Icon,
-  Slider,
   Intent,
   Popover,
   InputGroup,
@@ -52,6 +50,9 @@ import { noop } from "lodash";
 import { massageTickSpacing } from "../utils/massageTickSpacing";
 import { getClientX, getClientY } from "../utils/editorUtils";
 
+import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
+import { updateLabelsForInViewFeatures } from "../utils/updateLabelsForInViewFeatures";
+
 const nameDivWidth = 140;
 let charWidthInLinearViewDefault = 12;
 try {
@@ -67,6 +68,7 @@ try {
 }
 
 class AlignmentView extends React.Component {
+  bindOutsideChangeHelper = {};
   constructor(props) {
     super(props);
     window.scrollAlignmentToPercent = this.scrollAlignmentToPercent;
@@ -224,6 +226,9 @@ class AlignmentView extends React.Component {
     this.editorClicked = editorClicked.bind(this);
     this.editorDragStarted = editorDragStarted.bind(this);
     this.editorDragStopped = editorDragStopped.bind(this);
+    setTimeout(() => {
+      updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
+    }, 0);
     setTimeout(() => {
       this.setVerticalScrollRange();
     }, 500);
@@ -362,6 +367,7 @@ class AlignmentView extends React.Component {
     if (this.alignmentHolderTop) {
       this.alignmentHolderTop.scrollLeft = this.alignmentHolder.scrollLeft;
     }
+    updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
   };
   handleTopScroll = () => {
     this.alignmentHolder.scrollLeft = this.alignmentHolderTop.scrollLeft;
@@ -377,6 +383,7 @@ class AlignmentView extends React.Component {
       this.scrollAlignmentToPercent(newPercent);
       this.blockScroll = false;
     });
+    updateLabelsForInViewFeatures({ rectElement: ".alignmentHolder" });
   };
 
   setCharWidthInLinearView = ({ charWidthInLinearView }) => {
@@ -389,6 +396,13 @@ class AlignmentView extends React.Component {
       window.localStorage.getItem("charWidthInLinearViewDefault")
     );
   };
+
+  scrollToCaret = () => {
+    const el = window.document.querySelector(".veCaret"); //adding .veRowViewCaret breaks this for some reason
+    if (!el) return;
+    el.scrollIntoView({ inline: "center" });
+  };
+
   scrollAlignmentToPercent = (scrollPercentage) => {
     const scrollPercentageToUse = Math.min(Math.max(scrollPercentage, 0), 1);
 
@@ -1213,25 +1227,55 @@ class AlignmentView extends React.Component {
               )}
               {!isInPairwiseOverviewView && (
                 <UncontrolledSliderWithPlusMinusBtns
-                  onRelease={(val) => {
-                    this.setCharWidthInLinearView({
-                      charWidthInLinearView: val
+                  noWraparound
+                  bindOutsideChangeHelper={this.bindOutsideChangeHelper}
+                  onClick={() => {
+                    setTimeout(this.scrollToCaret, 0);
+                  }}
+                  minCharWidth={this.getMinCharWidth()}
+                  // onRelease={(zoomLvl) => {
+
+                  // }}
+                  // onRelease={(val) => {
+                  //   this.setCharWidthInLinearView({
+                  //     charWidthInLinearView: val
+                  //   });
+                  //   // this.blockScroll = true; //we block the scroll to prevent jumpiness and then manually update to the desired scroll percentage
+                  //   // const percentScrollage = this.easyStore.percentScrolled;
+                  //   // setTimeout(() => {
+                  //   //   this.blockScroll = false;
+                  //   //   this.scrollAlignmentToPercent(percentScrollage);
+                  //   // });
+                  // }}
+                  onChange={async (zoomLvl) => {
+                    // if (!this.startSliderDrag) {
+
+                    // }
+                    // this.startSliderDrag = true
+
+                    // zoomLvl is in the range of 0 to 10
+                    const minCharWidth = this.getMinCharWidth();
+                    const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+                    const newCharWidth =
+                      minCharWidth * Math.pow(scaleFactor, zoomLvl);
+                    await this.setCharWidthInLinearView({
+                      charWidthInLinearView: newCharWidth
                     });
-                    this.blockScroll = true; //we block the scroll to prevent jumpiness and then manually update to the desired scroll percentage
-                    const percentScrollage = this.easyStore.percentScrolled;
-                    setTimeout(() => {
-                      this.blockScroll = false;
-                      this.scrollAlignmentToPercent(percentScrollage);
+                    await this.scrollToCaret();
+                    await updateLabelsForInViewFeatures({
+                      rectElement: ".alignmentHolder"
                     });
                   }}
+                  coerceInitialValue={coerceInitialValue}
                   title="Adjust Zoom Level"
                   style={{ paddingTop: "4px", width: 100 }}
                   className="ove-slider"
                   labelRenderer={false}
-                  stepSize={0.01}
                   initialValue={charWidthInLinearView}
-                  max={14}
-                  min={this.getMinCharWidth()}
+                  stepSize={0.05} //was 0.01
+                  max={10}
+                  min={0}
+                  clickStepSize={0.5}
                 />
               )}
               {!noVisibilityOptions && !isInPairwiseOverviewView && (
@@ -1467,6 +1511,11 @@ export default compose(
             name,
             { useChecked, checked } = {}
           ) => {
+            setTimeout(() => {
+              updateLabelsForInViewFeatures({
+                rectElement: ".alignmentHolder"
+              });
+            }, 0);
             updateAlignmentViewVisibility({
               ...alignment,
               alignmentAnnotationVisibility: {
@@ -1517,70 +1566,6 @@ export default compose(
   )
 )(AlignmentView);
 
-class UncontrolledSliderWithPlusMinusBtns extends React.Component {
-  state = { value: 0 };
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (prevState.oldInitialValue !== nextProps.initialValue) {
-      return {
-        value: nextProps.initialValue, //set the state value if a new initial value comes in!
-        oldInitialValue: nextProps.initialValue
-      };
-    } else {
-      return null;
-    }
-  }
-
-  render() {
-    const { value } = this.state;
-    const { title, initialValue, style, ...rest } = this.props;
-
-    return (
-      <div
-        title={title}
-        style={{ ...style, display: "flex", marginLeft: 15, marginRight: 20 }}
-      >
-        <Icon
-          onClick={() => {
-            const newVal = Math.max(
-              this.state.value - (this.props.max - this.props.min) / 10,
-              this.props.min
-            );
-            this.setState({
-              value: newVal
-            });
-            this.props.onRelease(newVal);
-          }}
-          style={{ cursor: "pointer", marginRight: 5 }}
-          intent={Intent.PRIMARY}
-          icon="minus"
-        />
-        <Slider
-          {...{ ...rest, value }}
-          onChange={(value) => {
-            this.setState({ value });
-          }}
-        />
-        <Icon
-          onClick={() => {
-            const newVal = Math.min(
-              this.state.value + (this.props.max - this.props.min) / 10,
-              this.props.max
-            );
-            this.setState({
-              value: newVal
-            });
-            this.props.onRelease(newVal);
-          }}
-          style={{ cursor: "pointer", marginLeft: 5 }}
-          intent={Intent.PRIMARY}
-          icon="plus"
-        />
-      </div>
-    );
-  }
-}
-
 //this view is shown if we detect pairwise alignments
 class PairwiseAlignmentView extends React.Component {
   state = {
@@ -1694,3 +1679,23 @@ const PerformantSelectionLayer = view(({ easyStore, ...rest }) => {
 const PerformantCaret = view(({ easyStore, ...rest }) => {
   return <Caret caretPosition={easyStore.caretPosition} {...rest} />;
 });
+
+function coerceInitialValue({ initialValue, minCharWidth }) {
+  //char width 12 = 10
+  //zoomLvl = 0 -> charWidth = minCharWidth
+  //zoomLvl = 10 -> charWidth = 12
+
+  // const scaleFactor = Math.pow(12 / initialCharWidth, 1 / 10);
+  // newCharWidth = initialCharWidth * Math.pow(scaleFactor, zoomLvl)
+  // 12 = initialCharWidth * Math.pow(scaleFactor, 10)
+  // 12/initialCharWidth = Math.pow(scaleFactor, 10)
+  // Math.pow(12/minCharWidth, 1/10) = scaleFactor
+
+  // newCharWidth/minCharWidth =  * Math.pow(scaleFactor, zoomLvl)
+
+  const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+
+  const zoomLvl = Math.log(initialValue / minCharWidth) / Math.log(scaleFactor);
+
+  return zoomLvl;
+}
diff --git a/src/LinearView/index.js b/src/LinearView/index.js
index 540d2138e..a08bbabbd 100644
--- a/src/LinearView/index.js
+++ b/src/LinearView/index.js
@@ -19,10 +19,8 @@ import classNames from "classnames";
 import UncontrolledSliderWithPlusMinusBtns from "../helperComponents/UncontrolledSliderWithPlusMinusBtns";
 import { massageTickSpacing } from "../utils/massageTickSpacing";
 import PinchHelper from "./PinchHelper";
-import {
-  isElWithinAnotherEl,
-  isElWithinAnotherElWithDiff
-} from "../withEditorInteractions/isElementInViewport";
+
+import { updateLabelsForInViewFeatures } from "../utils/updateLabelsForInViewFeatures";
 
 const defaultMarginWidth = 10;
 
@@ -125,50 +123,8 @@ class _LinearView extends React.Component {
     return this.rowData;
   };
   updateLabelsForInViewFeaturesDebounced = debounce(() => {
-    this.updateLabelsForInViewFeatures();
+    updateLabelsForInViewFeatures();
   }, 20);
-  updateLabelsForInViewFeatures = () => {
-    const feats = document.querySelectorAll(`.veLinearView .veRowViewFeature`);
-    const parts = document.querySelectorAll(`.veLinearView .veRowViewPart`);
-    const primers = document.querySelectorAll(`.veLinearView .veRowViewPrimer`);
-    const els = [...feats, ...parts, ...primers];
-    const boundingRect = document
-      .querySelector(`.veLinearView`)
-      .getBoundingClientRect();
-
-    els.forEach((el) => {
-      const elBounds = el.getBoundingClientRect();
-      const isElIn = isElWithinAnotherEl(elBounds, boundingRect);
-
-      if (isElIn) {
-        const label = el.querySelector(".veLabelText");
-        if (!label) return;
-        const labelBounds = label.getBoundingClientRect();
-        const [isLabelIn, diff] = isElWithinAnotherElWithDiff(labelBounds, {
-          left: Math.max(boundingRect.left, elBounds.left),
-          right: Math.min(boundingRect.right, elBounds.right)
-        });
-        if (!isLabelIn) {
-          const l = window.getComputedStyle(label, null),
-            t = l.getPropertyValue("transform");
-
-          // If t return other than "none"
-          // Split content into several value
-          // The fourth one is the translateX value
-
-          if (t !== "none") {
-            const v = t.split("(")[1],
-              // w = v.split(")")[0],
-              x = v.split(",");
-
-            const newX = Number(x[4]) + diff;
-            const newY = Number(x[5].replace(")", ""));
-            label.setAttribute("transform", `translate(${newX},${newY})`);
-          }
-        }
-      }
-    });
-  };
 
   render() {
     const {
@@ -213,6 +169,7 @@ class _LinearView extends React.Component {
     const rowData = this.getRowData();
     const linearZoomEnabled =
       bpsPerRow > 50 && bpsPerRow < 30000 && withZoomLinearView;
+    const minCharWidth = initialCharWidth;
     return (
       <Draggable
         enableUserSelectHack={false} //needed to prevent the input bubble from losing focus post user drag
@@ -263,7 +220,7 @@ class _LinearView extends React.Component {
             <ZoomLinearView
               charWidth={this.charWidth}
               bindOutsideChangeHelper={this.bindOutsideChangeHelper}
-              initialCharWidth={initialCharWidth}
+              minCharWidth={minCharWidth}
               editorName={editorName}
               setCharWidth={(v) => {
                 this.setState({
@@ -271,7 +228,7 @@ class _LinearView extends React.Component {
                 });
               }}
               afterOnChange={() => {
-                this.updateLabelsForInViewFeatures();
+                updateLabelsForInViewFeatures();
               }}
             ></ZoomLinearView>
           )}
@@ -307,7 +264,7 @@ class _LinearView extends React.Component {
                   }
                 }
               );
-              this.updateLabelsForInViewFeatures();
+              updateLabelsForInViewFeatures();
             }}
             enabled={linearZoomEnabled}
           >
@@ -315,7 +272,7 @@ class _LinearView extends React.Component {
               {...{
                 ...rest,
                 onScroll: () => {
-                  this.updateLabelsForInViewFeatures();
+                  updateLabelsForInViewFeatures();
                   // this.updateLabelsForInViewFeaturesDebounced();
                 },
                 rowContainerStyle: isLinViewZoomed
@@ -374,7 +331,7 @@ export default withEditorInteractions(LinearView);
 
 function ZoomLinearView({
   setCharWidth,
-  initialCharWidth,
+  minCharWidth,
   bindOutsideChangeHelper,
   afterOnChange
 }) {
@@ -386,14 +343,13 @@ function ZoomLinearView({
         onClick={() => {
           setTimeout(scrollToCaret, 0);
         }}
-        onChange={(zoomLvl) => {
+        onChange={async (zoomLvl) => {
           //zoomLvl is in the range of 0 to 10
-          const scaleFactor = Math.pow(12 / initialCharWidth, 1 / 10);
-          const newCharWidth =
-            initialCharWidth * Math.pow(scaleFactor, zoomLvl);
-          setCharWidth(newCharWidth);
-          scrollToCaret();
-          afterOnChange && afterOnChange();
+          const scaleFactor = Math.pow(12 / minCharWidth, 1 / 10);
+          const newCharWidth = minCharWidth * Math.pow(scaleFactor, zoomLvl);
+          await setCharWidth(newCharWidth);
+          await scrollToCaret();
+          (await afterOnChange) && afterOnChange();
         }}
         leftIcon="minus"
         rightIcon="plus"
@@ -406,11 +362,6 @@ function ZoomLinearView({
         initialValue={0}
         max={10}
         min={0}
-        // stepSize={0.05}
-        // clickStepSize={1}
-        // initialValue={charWidth}
-        // max={12}
-        // min={initialCharWidth}
       ></UncontrolledSliderWithPlusMinusBtns>
     </div>
   );
diff --git a/src/RowItem/index.js b/src/RowItem/index.js
index bfbe897f8..5c278481a 100644
--- a/src/RowItem/index.js
+++ b/src/RowItem/index.js
@@ -404,10 +404,11 @@ export default function RowItem(props) {
         {drawAnnotations("orf", {
           CompOverride: Orfs
         })}
-        {drawAnnotations("translation", {
-          ...translationCommonProps,
-          onDoubleClick: translationDoubleClicked
-        })}
+        {charWidth > 4 &&
+          drawAnnotations("translation", {
+            ...translationCommonProps,
+            onDoubleClick: translationDoubleClicked
+          })}
 
         {showChromatogram && chromatogramData && (
           <Chromatogram
diff --git a/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.js b/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.js
index 389267861..ceb2f22a4 100644
--- a/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.js
+++ b/src/helperComponents/UncontrolledSliderWithPlusMinusBtns.js
@@ -7,9 +7,13 @@ export default class UncontrolledSliderWithPlusMinusBtns extends React.Component
   state = { value: 0 };
 
   static getDerivedStateFromProps(nextProps, prevState) {
+    //potentially coerce the initial value coming in
     if (prevState.oldInitialValue !== nextProps.initialValue) {
+      const val = nextProps.coerceInitialValue
+        ? nextProps.coerceInitialValue(nextProps)
+        : nextProps.initialValue;
       return {
-        value: nextProps.initialValue, //set the state value if a new initial value comes in!
+        value: val, //set the state value if a new initial value comes in!
         oldInitialValue: nextProps.initialValue
       };
     } else {
@@ -64,7 +68,7 @@ export default class UncontrolledSliderWithPlusMinusBtns extends React.Component
       >
         <Icon
           onClick={() => {
-            let newVal = this.state.value - (clickStepSize || stepSize);
+            let newVal = value - (clickStepSize || stepSize);
             if (newVal < min) {
               if (noWraparound) {
                 newVal = min;
@@ -84,6 +88,9 @@ export default class UncontrolledSliderWithPlusMinusBtns extends React.Component
         />
         <Slider
           {...{ ...rest, value }}
+          onRelease={(newVal) =>
+            this.props.onRelease && this.props.onRelease(newVal)
+          }
           onChange={(value) => {
             this.setState({ value });
             this.props.onChange && this.props.onChange(value);
@@ -91,7 +98,7 @@ export default class UncontrolledSliderWithPlusMinusBtns extends React.Component
         />
         <Icon
           onClick={() => {
-            let newVal = this.state.value + (clickStepSize || stepSize);
+            let newVal = value + (clickStepSize || stepSize);
             if (newVal > max) {
               if (noWraparound) {
                 newVal = max;
diff --git a/src/utils/updateLabelsForInViewFeatures.js b/src/utils/updateLabelsForInViewFeatures.js
new file mode 100644
index 000000000..7ed216ae6
--- /dev/null
+++ b/src/utils/updateLabelsForInViewFeatures.js
@@ -0,0 +1,49 @@
+import {
+  isElWithinAnotherEl,
+  isElWithinAnotherElWithDiff
+} from "../withEditorInteractions/isElementInViewport";
+
+export function updateLabelsForInViewFeatures({
+  rectElement = ".veLinearView"
+} = {}) {
+  const feats = document.querySelectorAll(`.veLinearView .veRowViewFeature`);
+  const parts = document.querySelectorAll(`.veLinearView .veRowViewPart`);
+  const primers = document.querySelectorAll(`.veLinearView .veRowViewPrimer`);
+  const els = [...feats, ...parts, ...primers];
+  const boundingRect = document
+    .querySelector(rectElement)
+    .getBoundingClientRect();
+
+  els.forEach((el) => {
+    const elBounds = el.getBoundingClientRect();
+    const isElIn = isElWithinAnotherEl(elBounds, boundingRect);
+
+    if (isElIn) {
+      const label = el.querySelector(".veLabelText");
+      if (!label) return;
+      const labelBounds = label.getBoundingClientRect();
+      const [isLabelIn, diff] = isElWithinAnotherElWithDiff(labelBounds, {
+        left: Math.max(boundingRect.left, elBounds.left),
+        right: Math.min(boundingRect.right, elBounds.right)
+      });
+      if (!isLabelIn) {
+        const l = window.getComputedStyle(label, null),
+          t = l.getPropertyValue("transform");
+
+        // If t return other than "none"
+        // Split content into several value
+        // The fourth one is the translateX value
+
+        if (t !== "none") {
+          const v = t.split("(")[1],
+            // w = v.split(")")[0],
+            x = v.split(",");
+
+          const newX = Number(x[4]) + diff;
+          const newY = Number(x[5].replace(")", ""));
+          label.setAttribute("transform", `translate(${newX},${newY})`);
+        }
+      }
+    }
+  });
+}