chore: center info message for unsupported jupyter notebook versions (#38114)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

modules/markup/jupyter/jupyter.go

@@ -6,6 +6,7 @@ package jupyter
 import (
 	"encoding/base64"
 	"fmt"
+	"html/template"
 	"io"
 	"strings"
 	"sync"
@@ -150,10 +151,8 @@ func (renderer) Render(ctx *markup.RenderContext, input io.Reader, outputWriter
 
 	// Check nbformat version
 	if notebook.Nbformat < 4 {
-		htmlWriter.WriteFormat(
+		msg := htmlutil.HTMLFormat("This notebook uses an older format (nbformat %d). Only nbformat 4+ is supported for rendering. Please upgrade the notebook in Jupyter or view the raw JSON.", notebook.Nbformat)
-			`<div class="ui info message">This notebook uses an older format (nbformat %d). Only nbformat 4+ is supported for rendering. Please upgrade the notebook in Jupyter or view the raw JSON.</div>`,
+		htmlWriter.WriteFormat(`<div class="file-not-rendered-prompt">%s</div>`, msg)
-			notebook.Nbformat,
-		)
 		return htmlWriter.Err()
 	}
 
@@ -190,9 +189,7 @@ func (renderer) Render(ctx *markup.RenderContext, input io.Reader, outputWriter
 	}
 
 	if truncated {
-		htmlWriter.WriteHTML(`<div class="ui warning message">`)
+		renderCellPrompt(htmlWriter, "Warning:", "Output truncated. This notebook contains too many cells to display efficiently.")
-		htmlWriter.WriteHTML(`<strong>Output truncated.</strong> This notebook contains too many cells to display efficiently.`)
-		htmlWriter.WriteHTML(`</div>`)
 	}
 
 	htmlWriter.WriteHTML(`</div>`)
@@ -254,6 +251,16 @@ func renderCellCode(output htmlutil.HTMLWriter, cell Cell, language string) erro
 	return output.Err()
 }
 
+func renderCellPrompt(output htmlutil.HTMLWriter, left, right template.HTML) {
+	output.WriteFormat(`
+<div class="notebook-cell">
+	<div class="cell-line">
+		<div class="cell-left cell-prompt">%s</div>
+		<div class="cell-right cell-prompt">%s</div>
+	</div>
+</div>`, left, right)
+}
+
 func renderCell(ctx *markup.RenderContext, output htmlutil.HTMLWriter, cell Cell, language string) error {
 	switch cell.CellType {
 	case "markdown":
@@ -265,7 +272,10 @@ func renderCell(ctx *markup.RenderContext, output htmlutil.HTMLWriter, cell Cell
 		if err := renderCellMarkdown(ctx, output, joinSource(cell.Source)); err != nil {
 			return err
 		}
-		output.WriteHTML(`</div></div></div>`)
+		output.WriteHTML(`
+		</div>
+	</div>
+</div>`)
 	case "code":
 		output.WriteHTML(`<div class="notebook-cell cell-type-code">`)
 		if err := renderCellCode(output, cell, language); err != nil {
@@ -273,13 +283,7 @@ func renderCell(ctx *markup.RenderContext, output htmlutil.HTMLWriter, cell Cell
 		}
 		output.WriteHTML(`</div>`)
 	default:
-		output.WriteFormat(`
+		renderCellPrompt(output, "Cell:", htmlutil.HTMLFormat("[Cell type %s - unsupported, skipped]", cell.CellType))
-<div class="notebook-cell">
-	<div class="cell-line">
-		<div class="cell-left cell-prompt">Cell:</div>
-		<div class="cell-right cell-prompt">[Cell type %s - unsupported, skipped]</div>
-	</div>
-</div>`, cell.CellType)
 	}
 	return output.Err()
 }

modules/markup/jupyter/jupyter_test.go

@@ -215,7 +215,7 @@ func TestRender(t *testing.T) {
 		err := r.Render(ctx, strings.NewReader(input), &output)
 
 		assert.NoError(t, err)
-		assert.Regexp(t, `<div class="ui info message">This notebook uses an older format.*</div>`, output.String())
+		assert.Regexp(t, `<div class="file-not-rendered-prompt">This notebook uses an older format.*</div>`, output.String())
 	})
 }
 

templates/repo/blame.tmpl

@@ -28,7 +28,7 @@
 			</div>
 		</div>
 	</h4>
-	<div class="ui bottom attached table unstackable segment">
+	<div class="ui bottom attached segment file-view-container">
 		<div class="file-view code-view unicode-escaped">
 			{{if .IsFileTooLarge}}
 				{{template "shared/filetoolarge" dict "RawFileLink" .RawFileLink}}

templates/repo/settings/lfs_file.tmpl

@@ -11,7 +11,7 @@
 					<a class="ui primary tiny button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{ctx.Locale.Tr "repo.settings.lfs_findcommits"}}</a>
 				</div>
 			</h4>
-			<div class="ui bottom attached table unstackable segment">
+			<div class="ui bottom attached segment file-view-container">
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus "root" $}}
 				<div class="file-view {{if .IsPlainText}}plain-text{{else if .IsTextFile}}code-view{{end}}">
 					{{if .IsFileTooLarge}}

templates/repo/view_file.tmpl

@@ -91,7 +91,7 @@
 		</div>
 	</h4>
 
-	<div class="ui bottom attached table unstackable segment">
+	<div class="ui bottom attached segment file-view-container">
 		{{if not .RenderAsMarkup}}
 			{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .EscapeStatus}}
 		{{end}}

web_src/css/repo/file-view.css

@@ -1,3 +1,9 @@
+.file-view-container {
+  padding: 0 !important; /* the file-view itself provides padding */
+  width: 100% !important; /* override fomantic's "100% + 2px" */
+  max-width: 100% !important;
+}
+
 .file-view tr.active .lines-num,
 .file-view tr.active .lines-escape,
 .file-view tr.active .lines-code {