fix: Line width and line colors problems in view.html (#385)

Author: yammesicka

lms/static/comments.js

@@ -1,5 +1,5 @@
 const FLAKE_COMMENTED_LINE_COLOR = '#fac4c3';
-const HOVER_LINE_STYLE = '1px solid #0d0d0f';
+const HOVER_LINE_COLOR = '#0d0d0f';
 
 
 function removeMark(lineElement) {
@@ -20,13 +20,8 @@ function hoverLine(targets, hover) {
   const [lineTarget, addCommentTarget] = targets;
   if (lineTarget.dataset && lineTarget.dataset.vimbackground === 'true') {return;}
   const commentOpacity = (hover === true) ? '1' : '0';
-  let parsedColor = hover;
-  if (hover === true) {
-    parsedColor = HOVER_LINE_STYLE;
-  } else if (hover === false) {
-    parsedColor = 'none';
-  }
-  lineTarget.style.border = parsedColor;
+  const parsedColor = (hover === true) ? HOVER_LINE_COLOR : '';
+  lineTarget.style.borderColor = parsedColor;
   addCommentTarget.style.opacity = commentOpacity;
 }
 

lms/static/my.css

@@ -134,8 +134,7 @@ a {
   overflow: auto;
   padding: 0.75rem;
   text-align: center;
-  border-right: #00000000 8px solid;
-  border-left: #00000000 8px solid;
+  border-inline: #00000000 8px solid;
 }
 
 .centered {
@@ -474,6 +473,8 @@ button.our-button-narrow, a.our-button-narrow {
   flex-direction: column;
   flex-basis: 70vw;
   flex-grow: 4;
+  flex-shrink: 1;
+  min-width: 0;
 }
 
 .code-view-container {
@@ -897,12 +898,10 @@ code#user-code {
   flex-direction: row;
   justify-content: start;
   cursor: pointer;
+  min-width: 0;
   width: 100%;
-  /* Nice trick: with flex-grow: 1; and width: 0;
-  * the line fits the container width
-  * */
-  width: 0;
-  flex-grow: 1;
+  flex-shrink: 1;
+  border-inline-start: 1px solid #00000000;
 }
 
 .grader-add {

lms/templates/exercises.html

@@ -10,7 +10,7 @@ <h1 id="exercises-head">{{ _('Exercises') }}</h1>
     </div>
     <div id="exercises">
       {%- for exercise in exercises %}
-      <div class="exercise" {%- if exercise.grade_color %} style="border-right: 8px solid {{ exercise.grade_color }};" {%- endif -%}>
+      <div class="exercise" {%- if exercise.grade_color %} style="border-inline-start-color: {{ exercise.grade_color }};" {%- endif -%}>
         <div class="right-side {{ direction }}-language">
           <div class="exercise-number me-3">{{ exercise['exercise_number'] }}</div>
           <div class="exercise-name"><div class="ex-title">{{ exercise['exercise_name'] | e }}</div></div>