ErnestK

<div class="container-fluid">
  <div class="table-row header">
    <div class="column index">#</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Title</div>
          <div class="column comment">Comment</div>
        </div>
        <div class="wrapper module-reporter">

ErnestK

<div class="page">

  <div class="page-header">
  <div class="table-row">
    <div class="column index">#</div>
    <div class="wrapper attributes">
      <div class="wrapper title-comment-module-reporter">
        <div class="wrapper title-comment">
          <div class="column title">Title</div>
          <div class="column comment">Comment</div>

ErnestK

Flexbox table with const header

Really Responsive Tables using CSS Flexbox - part 4. A complex example with lots of different kinds of fields, and a very custom wrapping logic. This is part of the Really Responsive Tables pen collection. See also this post on hashnode

A Pen by Ernest on CodePen.

License.

ErnestK

class OperationService
  attr_reader :errors, :params

  # always run
  def sstep!(action)
    begin
      result = method(action).call
      add_errors(step_name: action, errors: result) if NEGATIVE_RESULTS.include? result
    rescue => ex
      add_errors(step_name: action, errors: ex.message)

ErnestK

# project/app/controllers/api_controller.rb
class ApiController
  def render_response(serializer:, result:)
    if result.success?
      render json: serializer.new(result.value!).serializable_hash
    else
      render json: { errors: [result.failure] }
    end
  end
end

ErnestK

{
  "openapi": "3.0.1",
  "info": {
    "title": "Api Documentation",
    "description": "Api Documentation",
    "termsOfService": "urn:tos",
    "contact": {},
    "license": {
      "name": "Apache 2.0",
      "url": "http://www.apache.org/licenses/LICENSE-2.0"

ErnestK

Response Body:
################################################
data: {"id":"chatcmpl-907Yz9w2QY6XP2unCzOVC1OH5SeCq","object":"chat.completion.chunk","created":1709816101,"model":"gpt-4-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"role":"assistant","content":""},"logprobs":null,"finish_reason":null}]}

data: {"id":"chatcmpl-907Yz9w2QY6XP2unCzOVC1OH5SeCq","object":"chat.completion.chunk","created":1709816101,"model":"gpt-4-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"content":"Sure"},"logprobs":null,"finish_reason":null}]}

data: {"id":"chatcmpl-907Yz9w2QY6XP2unCzOVC1OH5SeCq","object":"chat.completion.chunk","created":1709816101,"model":"gpt-4-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"content":","},"logprobs":null,"finish_reason":null}]}

data: {"id":"chatcmpl-907Yz9w2QY6XP2unCzOVC1OH5SeCq","object":"chat.completion.chunk","created":1709816101,"model":"gpt-4-0613","system_fingerprint":null,"choices":[{"index":0,"delta":{"content":" let"},"logprobs":nu