diff --git a/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx b/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx
index 1f1c680..8d2018b 100644
--- a/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx
+++ b/src/components/cqlLibraryEditor/CqlLibraryEditor.tsx
@@ -49,7 +49,7 @@ const CqlLibraryEditor = ({
         onChange={onChange}
         value={value}
         inboundAnnotations={inboundAnnotations}
-        height="calc(100vh - 135px)"
+        height="100%"
         readOnly={readOnly}
         setOutboundAnnotations={setOutboundAnnotations}
       />
diff --git a/src/components/editCqlLibrary/EditCQLLibrary.scss b/src/components/editCqlLibrary/EditCQLLibrary.scss
index 30731b9..41b010a 100644
--- a/src/components/editCqlLibrary/EditCQLLibrary.scss
+++ b/src/components/editCqlLibrary/EditCQLLibrary.scss
@@ -36,7 +36,7 @@
     position: sticky;
     bottom: 0;
     left: 0;
-    z-index: 10;
+    z-index: 99;
     padding: 0 32px;
     background: #ffffff;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
@@ -57,11 +57,11 @@
   }
 
   .allotment-wrapper {
-    margin: 0 32px;
+    margin: 0;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
 
     .inner-right {
-      margin-left: 30px;
+      padding: 24px 16px;
     }
 
     .split-view {
diff --git a/src/components/editCqlLibrary/EditCqlLibrary.tsx b/src/components/editCqlLibrary/EditCqlLibrary.tsx
index 6bba9d9..c243885 100644
--- a/src/components/editCqlLibrary/EditCqlLibrary.tsx
+++ b/src/components/editCqlLibrary/EditCqlLibrary.tsx
@@ -387,164 +387,169 @@ const EditCqlLibrary = () => {
             </div>
           </Allotment.Pane>
           <Allotment.Pane>
-            <div id="right-panel">
+            <div className="right-panel">
               <NavTabs
                 activeTab={activeTab}
                 handleTabChange={handleTabChange}
               />
-              <div
-                style={{
-                  marginTop: 10,
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-end",
-                }}
-              >
-                <Typography
+              <div style={{ height: "calc(100% - 48px)", overflowY: "auto" }}>
+                <div
                   style={{
-                    fontSize: 14,
-                    fontWeight: 300,
-                    fontFamily: "Rubik",
-                    marginRight: 32,
+                    paddingTop: 10,
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-end",
                   }}
                 >
-                  <span
+                  <Typography
                     style={{
-                      color: "rgb(174, 28, 28)",
-                      marginRight: 3,
-                      fontWeight: 400,
+                      fontSize: 14,
+                      fontWeight: 300,
+                      fontFamily: "Rubik",
+                      marginRight: 32,
                     }}
                   >
-                    *
-                  </span>
-                  Indicates required field
-                </Typography>
-              </div>
-              <div className="inner-right">
-                {activeTab === "details" && (
-                  <div id="details-tab" data-test-id="details-tab">
-                    {/* These are loaded in first instance and then removed why ? */}
-                    {!formik.values.draft && (
+                    <span
+                      style={{
+                        color: "rgb(174, 28, 28)",
+                        marginRight: 3,
+                        fontWeight: 400,
+                      }}
+                    >
+                      *
+                    </span>
+                    Indicates required field
+                  </Typography>
+                </div>
+                <div className="inner-right">
+                  {activeTab === "details" && (
+                    <div id="details-tab" data-test-id="details-tab">
+                      {/* These are loaded in first instance and then removed why ? */}
+                      {!formik.values.draft && (
+                        <div className="form-row">
+                          <MadieAlert
+                            type="info"
+                            content={
+                              <p>
+                                CQL Library is not a draft. Only drafts can be
+                                edited.
+                              </p>
+                            }
+                            canClose={false}
+                          />
+                        </div>
+                      )}
+                      {!canEdit && (
+                        <div className="form-row">
+                          <MadieAlert
+                            type="info"
+                            content={
+                              <p>
+                                You are not the owner of the CQL Library. Only
+                                owner can edit it.
+                              </p>
+                            }
+                            canClose={false}
+                          />
+                        </div>
+                      )}
+
                       <div className="form-row">
-                        <MadieAlert
-                          type="info"
-                          content={
-                            <p>
-                              CQL Library is not a draft. Only drafts can be
-                              edited.
-                            </p>
+                        <TextField
+                          label="CQL Library Name"
+                          required
+                          id="cqlLibraryName"
+                          data-testid="cql-library-name-text-field"
+                          disabled={!formik.values.draft || !canEdit}
+                          inputProps={{
+                            id: "cql-library-name-text-field-input",
+                            "data-testid": "cql-library-name-text-field-input",
+                            "aria-required": true,
+                            required: true,
+                          }}
+                          error={
+                            formik.touched.cqlLibraryName &&
+                            Boolean(formik.errors.cqlLibraryName)
                           }
-                          canClose={false}
+                          {...formik.getFieldProps("cqlLibraryName")}
+                          helperText={formikErrorHandler(
+                            "cqlLibraryName",
+                            true
+                          )}
+                          placeholder="Enter a Cql Library Name"
                         />
                       </div>
-                    )}
-                    {!canEdit && (
+
                       <div className="form-row">
-                        <MadieAlert
-                          type="info"
-                          content={
-                            <p>
-                              You are not the owner of the CQL Library. Only
-                              owner can edit it.
-                            </p>
+                        <TextArea
+                          label="Description"
+                          disabled={!formik.values.draft || !canEdit}
+                          required
+                          name="cql-library-description"
+                          id="cql-library-description"
+                          onChange={formik.handleChange}
+                          value={formik.values.description}
+                          placeholder="Description"
+                          data-testid={"cql-library-description"}
+                          {...formik.getFieldProps("description")}
+                          error={
+                            formik.touched.description &&
+                            Boolean(formik.errors.description)
                           }
-                          canClose={false}
+                          helperText={formikErrorHandler("description", true)}
                         />
                       </div>
-                    )}
-
-                    <div className="form-row">
-                      <TextField
-                        label="CQL Library Name"
-                        required
-                        id="cqlLibraryName"
-                        data-testid="cql-library-name-text-field"
-                        disabled={!formik.values.draft || !canEdit}
-                        inputProps={{
-                          id: "cql-library-name-text-field-input",
-                          "data-testid": "cql-library-name-text-field-input",
-                          "aria-required": true,
-                          required: true,
-                        }}
-                        error={
-                          formik.touched.cqlLibraryName &&
-                          Boolean(formik.errors.cqlLibraryName)
-                        }
-                        {...formik.getFieldProps("cqlLibraryName")}
-                        helperText={formikErrorHandler("cqlLibraryName", true)}
-                        placeholder="Enter a Cql Library Name"
-                      />
-                    </div>
-
-                    <div className="form-row">
-                      <TextArea
-                        label="Description"
-                        disabled={!formik.values.draft || !canEdit}
-                        required
-                        name="cql-library-description"
-                        id="cql-library-description"
-                        onChange={formik.handleChange}
-                        value={formik.values.description}
-                        placeholder="Description"
-                        data-testid={"cql-library-description"}
-                        {...formik.getFieldProps("description")}
-                        error={
-                          formik.touched.description &&
-                          Boolean(formik.errors.description)
-                        }
-                        helperText={formikErrorHandler("description", true)}
-                      />
-                    </div>
 
-                    <div className="form-row">
-                      <AutoComplete
-                        id="publisher"
-                        dataTestId="publisher"
-                        label="Publisher"
-                        placeholder="-"
-                        required={true}
-                        disabled={!formik.values.draft || !canEdit}
-                        error={
-                          formik.touched.publisher && formik.errors.publisher
-                        }
-                        helperText={
-                          formik.touched.publisher && formik.errors.publisher
-                        }
-                        options={organizations}
-                        {...formik.getFieldProps("publisher")}
-                        onChange={formik.setFieldValue}
-                      />
-                    </div>
+                      <div className="form-row">
+                        <AutoComplete
+                          id="publisher"
+                          dataTestId="publisher"
+                          label="Publisher"
+                          placeholder="-"
+                          required={true}
+                          disabled={!formik.values.draft || !canEdit}
+                          error={
+                            formik.touched.publisher && formik.errors.publisher
+                          }
+                          helperText={
+                            formik.touched.publisher && formik.errors.publisher
+                          }
+                          options={organizations}
+                          {...formik.getFieldProps("publisher")}
+                          onChange={formik.setFieldValue}
+                        />
+                      </div>
 
-                    <div className="form-row">
-                      <FormControlLabel
-                        sx={{
-                          "& .MuiFormControlLabel-label": {
-                            fontSize: 16,
-                            fontWeight: 300,
-                          },
-                        }}
-                        control={
-                          <Checkbox
-                            id="experimental"
-                            data-testid="cql-library-experimental-checkbox"
-                            sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
-                            disabled={!formik.values.draft || !canEdit}
-                            {...formik.getFieldProps("experimental")}
-                            checked={formik.values.experimental}
-                            onChange={(event: any) => {
-                              formik.setFieldValue(
-                                "experimental",
-                                event.target.checked
-                              );
-                            }}
-                          />
-                        }
-                        label="Experimental"
-                      />
+                      <div className="form-row">
+                        <FormControlLabel
+                          sx={{
+                            "& .MuiFormControlLabel-label": {
+                              fontSize: 16,
+                              fontWeight: 300,
+                            },
+                          }}
+                          control={
+                            <Checkbox
+                              id="experimental"
+                              data-testid="cql-library-experimental-checkbox"
+                              sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
+                              disabled={!formik.values.draft || !canEdit}
+                              {...formik.getFieldProps("experimental")}
+                              checked={formik.values.experimental}
+                              onChange={(event: any) => {
+                                formik.setFieldValue(
+                                  "experimental",
+                                  event.target.checked
+                                );
+                              }}
+                            />
+                          }
+                          label="Experimental"
+                        />
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
             </div>
           </Allotment.Pane>