Perform input validation on feed_cols

Make sure that the value of feed_cols is 2, 3, 4, 5, 6, or 8, so that
the appropriate Pure CSS classes are guaranteed to exist

src/invidious/users.cr

@@ -51,7 +51,7 @@ struct Preferences
   @[YAML::Field(converter: Preferences::BoolToString)]
   property dark_mode : String = CONFIG.default_user_preferences.dark_mode
 
-  @[JSON::Field(converter: Preferences::ClampInt)]
+  @[JSON::Field(converter: Preferences::ClampFeedCols)]
   property feed_cols : Int32 = CONFIG.default_user_preferences.feed_cols
   property latest_only : Bool = CONFIG.default_user_preferences.latest_only
   property listen : Bool = CONFIG.default_user_preferences.listen
@@ -147,6 +147,36 @@ struct Preferences
     end
   end
 
+  module ClampFeedCols
+    def self.to_json(value : Int32, json : JSON::Builder)
+      case value.clamp(2, 8)
+      when 7
+        # Pure CSS does not have pure-g-*-1-7
+        json.number 8
+      else
+        json.number value.clamp(2, 8)
+      end
+    end
+
+    def self.from_json(value : JSON::PullParser) : Int32
+      value.read_int.clamp(2, 8).to_i32
+    end
+
+    def self.to_yaml(value : Int32, yaml : YAML::Nodes::Builder)
+      case value.clamp(2, 8)
+      when 7
+        # Pure CSS does not have pure-g-*-1-7
+        yaml.scalar 8
+      else
+        yaml.scalar value.clamp(2, 8)
+      end
+    end
+
+    def self.from_yaml(ctx : YAML::ParseContext, node : YAML::Nodes::Node) : Int32
+      node.value.clamp(2, 9)
+    end
+  end
+
   module FamilyConverter
     def self.to_yaml(value : Socket::Family, yaml : YAML::Nodes::Builder)
       case value

src/invidious/views/preferences.ecr

@@ -174,7 +174,7 @@
 
             <div class="pure-control-group">
                 <label for="feed_cols"><%= translate(locale, "Number of videos shown per row: ") %></label>
-                <input name="feed_cols" id="feed_cols" type="number" value="<%= preferences.feed_cols %>">
+                <input name="feed_cols" id="feed_cols" type="number" value="<%= preferences.feed_cols %>" min="2" max="8">
             </div>
 
             <% if env.get? "user" %>