Adds sizes to img tags for smooth scrolling

CHANGELOG.md

@@ -14,6 +14,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 - Fixes [#1925](https://github.com/gitkraken/vscode-gitlens/issues/1925) - Branches from remotes outside the repo aren't showing associated pull requests (for connected remotes)
 - Fixes [#1920](https://github.com/gitkraken/vscode-gitlens/issues/1920) - Can't view tags on torvalds/linux
 - Fixes [#1923](https://github.com/gitkraken/vscode-gitlens/issues/1923) - View titles fail to update properly when number of "opened" repos changes
+- Fixes smooth scrolling and TOC jumping issues on the GitLens Interactive Settings
 
 ## [12.0.5] - 2022-03-17
 

src/webviews/apps/settings/partials/blame.html

@@ -187,48 +187,64 @@
 					src="#{webroot}/media/blame.webp"
 					data-visibility="blame.compact =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight.webp"
 					data-visibility="blame.compact =false &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/blame-compact.webp"
 					data-visibility="blame.compact"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-compact-highlight.webp"
 					data-visibility="blame.compact &amp; blame.highlight.enabled &amp; blame.highlight.locations +line"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight-gutter.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +gutter"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-highlight-scrollbar.webp"
 					data-visibility="blame.highlight.enabled &amp; blame.highlight.locations +overview"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-heatmap-left.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =left"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/blame-heatmap-right.webp"
 					data-visibility="blame.heatmap.enabled &amp; blame.heatmap.location =right"
 					loading="lazy"
+					width="600px"
+					height="206px"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/changes.html

@@ -85,18 +85,28 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/changes.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/changes.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/changes-highlight-gutter.webp"
 					data-visibility="changes.locations +gutter"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/changes-highlight-scrollbar.webp"
 					data-visibility="changes.locations +overview"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/code-lens.html

@@ -252,24 +252,36 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/code-lens.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/code-lens.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-file-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 
 				<img
@@ -277,18 +289,24 @@
 					src="#{webroot}/media/code-lens-containers-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-containers-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-containers-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 
 				<img
@@ -296,18 +314,24 @@
 					src="#{webroot}/media/code-lens-blocks-recent+authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-blocks-recent.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +blocks"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/code-lens-blocks-authors.webp"
 					data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/current-line.html

@@ -116,24 +116,36 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/current-line-blame.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/current-line-blame-on-scrollable.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/heatmap.html

@@ -105,18 +105,28 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/heatmap.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/heatmap.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/heatmap-gutter.webp"
 					data-visibility="heatmap.locations +gutter"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/heatmap-scrollbar.webp"
 					data-visibility="heatmap.locations +overview"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/hovers.html

@@ -152,48 +152,68 @@
 			</div>
 
 			<div class="section__preview" data-visibility="hovers.enabled">
-				<img class="image__preview" src="#{webroot}/media/hovers-currentLine.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/hovers-currentLine.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-currentLine-on.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-currentLine-on+pr.webp"
 					data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details &amp; hovers.currentLine.changes =false &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.currentLine.enabled &amp; hovers.currentLine.details =false &amp; hovers.currentLine.changes"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>
@@ -269,48 +289,64 @@
 					src="#{webroot}/media/hovers-annotations.webp"
 					data-visibility="blame.compact =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/hovers-annotations-compact.webp"
 					data-visibility="blame.compact"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-annotations-currentLine-on.webp"
 					data-visibility="currentLine.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details+pr.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-details.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details &amp; hovers.annotations.changes =false &amp; hovers.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/hovers-changes.webp"
 					data-visibility="hovers.enabled &amp; hovers.annotations.enabled &amp; hovers.annotations.details =false &amp; hovers.annotations.changes"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/modes.html

@@ -65,18 +65,28 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/status-bar.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/modes-status-bar-left.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =left"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/modes-status-bar-right.webp"
 					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =right"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/rebase-editor.html

@@ -33,6 +33,8 @@
 					src="#{webroot}/media/rebase-editor.webp"
 					data-visibility="rebaseEditor.enabled"
 					loading="lazy"
+					width="645"
+					height="441"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/status-bar.html

@@ -149,30 +149,44 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/status-bar.webp"
+					loading="lazy"
+					width="600"
+					height="206"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-right+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-right.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =right &amp; statusBar.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-left+pr.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/status-bar-left.webp"
 					data-visibility="statusBar.enabled &amp; statusBar.alignment =left &amp; statusBar.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="206"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.branches.html

@@ -177,36 +177,48 @@
 					src="#{webroot}/media/branches-view-compare+pr.webp"
 					data-visibility="views.branches.showBranchComparison !false & views.branches.pullRequests.enabled & views.branches.pullRequests.showForBranches"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-compare.webp"
 					data-visibility="views.branches.showBranchComparison !false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view-pr.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/branches-view.webp"
 					data-visibility="views.branches.showBranchComparison =false &amp; views.branches.pullRequests.enabled &amp; views.branches.pullRequests.showForBranches =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.commits.html

@@ -211,60 +211,80 @@
 					src="#{webroot}/media/commits-view-auto-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree & views.commits.showBranchComparison !false & views.commits.pullRequests.enabled & views.commits.pullRequests.showForBranches & views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare+pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-compare.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto-commit-pr.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-auto.webp"
 					data-visibility="views.commits.files.layout !tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 
 				<img
@@ -272,60 +292,80 @@
 					src="#{webroot}/media/commits-view-tree-compare+pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare+pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits = false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-compare.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison !false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false "
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-pr+commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree-commit-pr.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/commits-view-tree.webp"
 					data-visibility="views.commits.files.layout =tree &amp; views.commits.showBranchComparison =false &amp; views.commits.pullRequests.enabled &amp; views.commits.pullRequests.showForBranches =false &amp; views.commits.pullRequests.showForCommits =false"
 					loading="lazy"
+					width="600"
+					height="400"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.contributors.html

@@ -142,7 +142,13 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/contributors-view.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/contributors-view.webp"
+					loading="lazy"
+					width="600"
+					height="360"
+				/>
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/views.file-history.html

@@ -78,12 +78,20 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/file-history-view.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/file-history-view.webp"
+					loading="lazy"
+					width="600"
+					height="360"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/file-history-view-avatars.webp"
 					data-visibility="views.fileHistory.avatars"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.html

@@ -31,7 +31,13 @@
 							>Source Control Layout (default)</a
 						>
 						<p>Shows all the views together on the Source Control side bar</p>
-						<img class="image__preview" src="#{webroot}/media/views-layout-scm.webp" loading="lazy" />
+						<img
+							class="image__preview"
+							src="#{webroot}/media/views-layout-scm.webp"
+							loading="lazy"
+							width="357"
+							height="410"
+						/>
 					</div>
 					<div class="preset">
 						<a
@@ -41,7 +47,13 @@
 							>GitLens Layout</a
 						>
 						<p>Shows all the views together on the GitLens side bar</p>
-						<img class="image__preview" src="#{webroot}/media/views-layout-gitlens.webp" loading="lazy" />
+						<img
+							class="image__preview"
+							src="#{webroot}/media/views-layout-gitlens.webp"
+							loading="lazy"
+							width="357"
+							height="410"
+						/>
 					</div>
 				</div>
 

src/webviews/apps/settings/partials/views.line-history.html

@@ -43,12 +43,20 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/line-history-view.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/line-history-view.webp"
+					loading="lazy"
+					width="600"
+					height="360"
+				/>
 				<img
 					class="image__preview--overlay hidden"
 					src="#{webroot}/media/line-history-view-avatars.webp"
 					data-visibility="views.lineHistory.avatars"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.remotes.html

@@ -158,18 +158,24 @@
 					src="#{webroot}/media/remotes-view-pr.webp"
 					data-visibility="views.remotes.pullRequests.enabled & views.remotes.pullRequests.showForBranches"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/remotes-view.webp"
 					data-visibility="views.remotes.pullRequests.enabled &amp; views.remotes.pullRequests.showForBranches =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.repositories.html

@@ -362,7 +362,13 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/repositories-view.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/repositories-view.webp"
+					loading="lazy"
+					width="600"
+					height="360"
+				/>
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/views.searchAndCompare.html

@@ -113,7 +113,13 @@
 			</div>
 
 			<div class="section__preview">
-				<img class="image__preview" src="#{webroot}/media/search-and-compare-view.webp" loading="lazy" />
+				<img
+					class="image__preview"
+					src="#{webroot}/media/search-and-compare-view.webp"
+					loading="lazy"
+					width="600"
+					height="360"
+				/>
 			</div>
 		</div>
 

src/webviews/apps/settings/partials/views.stashes.html

@@ -117,12 +117,16 @@
 					src="#{webroot}/media/stashes-view-auto.webp"
 					data-visibility="views.stashes.files.layout !tree"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/stashes-view-tree.webp"
 					data-visibility="views.stashes.files.layout =tree"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.tags.html

@@ -94,12 +94,16 @@
 					src="#{webroot}/media/tags-view-list.webp"
 					data-visibility="views.tags.branches.layout !tree"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/tags-view-tree.webp"
 					data-visibility="views.tags.branches.layout =tree"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/settings/partials/views.worktrees.html

@@ -176,36 +176,48 @@
 					src="#{webroot}/media/worktrees-view-compare+pr.webp"
 					data-visibility="views.worktrees.showBranchComparison !false & views.worktrees.pullRequests.enabled & views.worktrees.pullRequests.showForBranches"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-compare.webp"
 					data-visibility="views.worktrees.showBranchComparison !false &amp; views.worktrees.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-compare.webp"
 					data-visibility="views.worktrees.showBranchComparison !false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view-pr.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 				<img
 					class="image__preview hidden"
 					src="#{webroot}/media/worktrees-view.webp"
 					data-visibility="views.worktrees.showBranchComparison =false &amp; views.worktrees.pullRequests.enabled &amp; views.worktrees.pullRequests.showForBranches =false"
 					loading="lazy"
+					width="600"
+					height="360"
 				/>
 			</div>
 		</div>

src/webviews/apps/welcome/welcome.html

@@ -102,24 +102,36 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{webroot}/media/current-line-blame.webp" loading="lazy" />
+						<img
+							class="image__preview"
+							src="#{webroot}/media/current-line-blame.webp"
+							loading="lazy"
+							width="600"
+							height="206"
+						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on.webp"
 							data-visibility="currentLine.enabled"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on+pr.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.pullRequests.enabled"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/current-line-blame-on-scrollable.webp"
 							data-visibility="currentLine.enabled &amp; currentLine.scrollable"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 					</div>
 				</section>
@@ -144,24 +156,36 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{webroot}/media/code-lens.webp" loading="lazy" />
+						<img
+							class="image__preview"
+							src="#{webroot}/media/code-lens.webp"
+							loading="lazy"
+							width="600"
+							height="206"
+						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +document"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-file-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +document"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 
 						<img
@@ -169,18 +193,24 @@
 							src="#{webroot}/media/code-lens-containers-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-containers-recent.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled =false &amp; codeLens.scopes +containers"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/code-lens-containers-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +containers"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 
 						<img
@@ -188,6 +218,8 @@
 							src="#{webroot}/media/code-lens-blocks-recent+authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
@@ -200,6 +232,8 @@
 							src="#{webroot}/media/code-lens-blocks-authors.webp"
 							data-visibility="codeLens.enabled &amp; codeLens.recentChange.enabled =false &amp; codeLens.authors.enabled &amp; codeLens.scopes +blocks"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 					</div>
 				</section>
@@ -224,18 +258,28 @@
 						</div>
 					</div>
 					<div class="section__preview">
-						<img class="image__preview" src="#{webroot}/media/status-bar.webp" loading="lazy" />
+						<img
+							class="image__preview"
+							src="#{webroot}/media/status-bar.webp"
+							loading="lazy"
+							width="600"
+							height="206"
+						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/status-bar-left.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =left"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 						<img
 							class="image__preview--overlay hidden"
 							src="#{webroot}/media/status-bar-right.webp"
 							data-visibility="statusBar.enabled &amp; statusBar.alignment =right"
 							loading="lazy"
+							width="600"
+							height="206"
 						/>
 					</div>
 				</section>
@@ -273,6 +317,8 @@
 									class="image__preview"
 									src="#{webroot}/media/views-layout-scm.webp"
 									loading="lazy"
+									width="357"
+									height="410"
 								/>
 							</div>
 							<div class="preset">
@@ -287,6 +333,8 @@
 									class="image__preview"
 									src="#{webroot}/media/views-layout-gitlens.webp"
 									loading="lazy"
+									width="357"
+									height="410"
 								/>
 							</div>
 						</div>