Hopefully fixing double diagrams in prod

ofriw · ofriw · commit d74faaa313ef · 2026-07-16T17:56:03.000+03:00
diff --git a/website/src/components/VisualElements/ModelEncodingAtlas.module.css b/website/src/components/VisualElements/ModelEncodingAtlas.module.css
@@ -6,15 +6,19 @@
   container-type: inline-size;
 }
 
-.diagram {
-  display: block;
+.diagram.desktopDiagram,
+.diagram.mobileDiagram {
   width: 100%;
   height: auto;
   max-width: 640px;
   margin-inline: auto;
 }
 
-.mobileDiagram {
+.diagram.desktopDiagram {
+  display: block;
+}
+
+.diagram.mobileDiagram {
   display: none;
   max-width: 360px;
 }
@@ -26,21 +30,21 @@
 }
 
 @container (max-width: 520px) {
-  .desktopDiagram {
+  .diagram.desktopDiagram {
     display: none;
   }
 
-  .mobileDiagram {
+  .diagram.mobileDiagram {
     display: block;
   }
 }
 
 @media (max-width: 520px) {
-  .desktopDiagram {
+  .diagram.desktopDiagram {
     display: none;
   }
 
-  .mobileDiagram {
+  .diagram.mobileDiagram {
     display: block;
   }
 }
diff --git a/website/src/components/VisualElements/PostTrainingTuningBoard.module.css b/website/src/components/VisualElements/PostTrainingTuningBoard.module.css
@@ -6,35 +6,39 @@
   container-type: inline-size;
 }
 
-.diagram {
-  display: block;
+.diagram.desktopDiagram,
+.diagram.mobileDiagram {
   width: 100%;
   height: auto;
   max-width: 640px;
   margin-inline: auto;
 }
 
-.mobileDiagram {
+.diagram.desktopDiagram {
+  display: block;
+}
+
+.diagram.mobileDiagram {
   display: none;
   max-width: 360px;
 }
 
 @container (max-width: 520px) {
-  .desktopDiagram {
+  .diagram.desktopDiagram {
     display: none;
   }
 
-  .mobileDiagram {
+  .diagram.mobileDiagram {
     display: block;
   }
 }
 
 @media (max-width: 520px) {
-  .desktopDiagram {
+  .diagram.desktopDiagram {
     display: none;
   }
 
-  .mobileDiagram {
+  .diagram.mobileDiagram {
     display: block;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -6,15 +6,19 @@`
`6`	`6`	`container-type: inline-size;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.diagram {`
`10`		`- display: block;`
	`9`	`+.diagram.desktopDiagram,`
	`10`	`+.diagram.mobileDiagram {`
`11`	`11`	`width: 100%;`
`12`	`12`	`height: auto;`
`13`	`13`	`max-width: 640px;`
`14`	`14`	`margin-inline: auto;`
`15`	`15`	`}`
`16`	`16`
`17`		`-.mobileDiagram {`
	`17`	`+.diagram.desktopDiagram {`
	`18`	`+ display: block;`
	`19`	`+}`
	`20`	`+`
	`21`	`+.diagram.mobileDiagram {`
`18`	`22`	`display: none;`
`19`	`23`	`max-width: 360px;`
`20`	`24`	`}`
`@@ -26,21 +30,21 @@`
`26`	`30`	`}`
`27`	`31`
`28`	`32`	`@container (max-width: 520px) {`
`29`		`- .desktopDiagram {`
	`33`	`+ .diagram.desktopDiagram {`
`30`	`34`	`display: none;`
`31`	`35`	`}`
`32`	`36`
`33`		`- .mobileDiagram {`
	`37`	`+ .diagram.mobileDiagram {`
`34`	`38`	`display: block;`
`35`	`39`	`}`
`36`	`40`	`}`
`37`	`41`
`38`	`42`	`@media (max-width: 520px) {`
`39`		`- .desktopDiagram {`
	`43`	`+ .diagram.desktopDiagram {`
`40`	`44`	`display: none;`
`41`	`45`	`}`
`42`	`46`
`43`		`- .mobileDiagram {`
	`47`	`+ .diagram.mobileDiagram {`
`44`	`48`	`display: block;`
`45`	`49`	`}`
`46`	`50`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,35 +6,39 @@`
`6`	`6`	`container-type: inline-size;`
`7`	`7`	`}`
`8`	`8`
`9`		`-.diagram {`
`10`		`- display: block;`
	`9`	`+.diagram.desktopDiagram,`
	`10`	`+.diagram.mobileDiagram {`
`11`	`11`	`width: 100%;`
`12`	`12`	`height: auto;`
`13`	`13`	`max-width: 640px;`
`14`	`14`	`margin-inline: auto;`
`15`	`15`	`}`
`16`	`16`
`17`		`-.mobileDiagram {`
	`17`	`+.diagram.desktopDiagram {`
	`18`	`+ display: block;`
	`19`	`+}`
	`20`	`+`
	`21`	`+.diagram.mobileDiagram {`
`18`	`22`	`display: none;`
`19`	`23`	`max-width: 360px;`
`20`	`24`	`}`
`21`	`25`
`22`	`26`	`@container (max-width: 520px) {`
`23`		`- .desktopDiagram {`
	`27`	`+ .diagram.desktopDiagram {`
`24`	`28`	`display: none;`
`25`	`29`	`}`
`26`	`30`
`27`		`- .mobileDiagram {`
	`31`	`+ .diagram.mobileDiagram {`
`28`	`32`	`display: block;`
`29`	`33`	`}`
`30`	`34`	`}`
`31`	`35`
`32`	`36`	`@media (max-width: 520px) {`
`33`		`- .desktopDiagram {`
	`37`	`+ .diagram.desktopDiagram {`
`34`	`38`	`display: none;`
`35`	`39`	`}`
`36`	`40`
`37`		`- .mobileDiagram {`
	`41`	`+ .diagram.mobileDiagram {`
`38`	`42`	`display: block;`
`39`	`43`	`}`
`40`	`44`	`}`