Fix code height, limit scroll to last line

src/ui/App.tsx

@@ -46,9 +46,11 @@ const LargeApp = () => {
                 <SideBar />
             </Splitter.Panel>
             <Splitter.Panel size={sizes[1]}>
-                {tabsEnabled && <TabsComponent />}
-                <FilepathHeader />
-                <Code />
+                <Flex vertical style={{ height: "100vh" }}>
+                    {tabsEnabled && <TabsComponent />}
+                    <FilepathHeader />
+                    <div style={{ flexGrow: 1 }}><Code /></div>
+                </Flex>
             </Splitter.Panel>
         </Splitter>
     );
@@ -67,7 +69,7 @@ const MobileApp = () => {
     };
 
     return (
-        <Flex vertical={true}>
+        <Flex vertical style={{ height: "100vh" }}>
             <Drawer
                 onClose={onClose}
                 open={open}
@@ -93,7 +95,7 @@ const MobileApp = () => {
                 }
             </Flex>
             <FilepathHeader />
-            <Code />
+            <div style={{ flexGrow: 1 }}><Code /></div>
         </Flex>
     );
 };

src/ui/Code.tsx

@@ -352,14 +352,18 @@ const Code = () => {
             size={"large"}
             spinning={!!decompiling}
             description="Decompiling..."
-            style={{
-                height: '100%',
-                color: 'white'
+            styles={{
+                root: {
+                    height: '100%',
+                    color: 'white'
+                },
+                container: {
+                    height: '100%',
+                }
             }}
         >
             {contextHolder}
             <Editor
-                height="100vh"
                 defaultLanguage={"java"}
                 language={decompileResult?.language}
                 theme="vs-dark"
@@ -370,7 +374,8 @@ const Code = () => {
                     minimap: { enabled: !hideMinimap },
                     glyphMargin: true,
                     foldingImportsByDefault: true,
-                    foldingHighlight: false
+                    foldingHighlight: false,
+                    scrollBeyondLastLine: false,
                 }}
                 onMount={(codeEditor) => {
                     editorRef.current = codeEditor;

src/ui/diff/DiffCode.tsx

@@ -10,11 +10,7 @@ import { isDecompiling } from "../../logic/Decompiler.ts";
 import { unifiedDiff } from '../../logic/Settings';
 import { selectedFile } from '../../logic/State.ts';
 
-interface DiffCodeProps {
-    height?: number | string;
-}
-
-const DiffCode = ({ height }: DiffCodeProps) => {
+const DiffCode = () => {
     const leftResult = useObservable(getLeftDiff().result);
     const rightResult = useObservable(getRightDiff().result);
     const editorRef = useRef<editor.IStandaloneDiffEditor | null>(null);
@@ -56,20 +52,17 @@ const DiffCode = ({ height }: DiffCodeProps) => {
             size={"large"}
             spinning={!!loading}
             description="Decompiling..."
-            style={{
-                height: '100%',
-                color: 'white'
+            styles={{
+                root: {
+                    height: '100%',
+                    color: 'white'
+                },
+                container: {
+                    height: '100%',
+                }
             }}
         >
-            {/*
-            Before the height is changed it is "70%", or whatever the default % is set to.
-            The wrapping elements for the output editor do not have the relevant context to know what the 70% is of,
-            so it falls back to 0. We must override this and specify that the height is for the viewport by swapping
-            the '%' out with 'vh'. If the height is a number literal then the size has been changed and will be an
-            exact pixel count
-            */}
             <DiffEditor
-                height={typeof height === "string" ? height.replace("\%", "vh") : height}
                 language="java"
                 theme="vs-dark"
                 original={leftResult?.source}
@@ -83,6 +76,7 @@ const DiffCode = ({ height }: DiffCodeProps) => {
                     readOnly: true,
                     domReadOnly: true,
                     renderSideBySide: !isUnified,
+                    scrollBeyondLastLine: false,
                     //tabSize: 3,
                 }} />
         </Spin>

src/ui/diff/DiffView.tsx

@@ -9,16 +9,9 @@ const DiffView = () => {
     return (
         <>
             <FilepathHeader />
-            <Splitter layout="vertical" onResize={setSizes} style={{ height: "calc(100vh - 26px)" }}>
+            <Splitter vertical onResize={setSizes} style={{ height: "calc(100vh - 26px)" }}>
                 <Splitter.Panel min="5%" size={sizes[0]} style={{ overflow: 'hidden' }}>
-                    <div style={{ display: 'flex', flexDirection: 'column' }}>
-                        {/*
-                    <DiffEditor/> does not allow setting various css properties and only accepts a height
-                    literal, so we pass the expected size from the view to the editor to ensure it fits in the
-                    viewport correctly
-                    */}
-                        <DiffCode height={sizes[0]} />
-                    </div>
+                    <DiffCode />
                 </Splitter.Panel>
                 <Splitter.Panel
                     size={sizes[1]}
@@ -37,4 +30,4 @@ const DiffView = () => {
     );
 };
 
-export default DiffView;
+export default DiffView;